/* Ajustes sobre MudBlazor. El tema (colores, tipografía) está en Components/Layout/TemaAyni.cs. */
html, body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Blazor lleva el foco al primer h1 al navegar (lectores de pantalla); sin el recuadro visual. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus {
    outline: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* ---- Marca Ayni ---- */
.marca-ayni {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: lowercase;
}

.marca-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.marca-barra img {
    height: 26px;
    width: 26px;
}

.marca-barra .marca-ayni {
    font-size: 1.6rem;
    line-height: 1;
}

.marca-barra-subtitulo {
    opacity: .85;
    border-left: 1px solid rgba(255, 255, 255, .4);
    padding-left: 16px;
}


/* ---- Menú de la cuenta (iniciales en la barra) ---- */
.cuenta-activador {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #1B5424;
    background: linear-gradient(135deg, #FFFFFF, #DCEFE0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15), inset 0 0 0 2px rgba(255, 255, 255, .6);
    cursor: pointer;
    user-select: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cuenta-activador:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, .2), inset 0 0 0 2px rgba(255, 255, 255, .8); }
.cuenta-activador.cuenta-grande { width: 44px; height: 44px; font-size: 1rem; cursor: default; flex: none; }
.cuenta-activador.cuenta-grande:hover { transform: none; }

.menu-cuenta-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 12px;
    min-width: 260px;
}

.menu-cuenta-nombre { font-weight: 600; }
.menu-cuenta-correo { font-size: .8rem; opacity: .65; }

/* ---- Estados de una incidencia: mismos colores en el portal del personal, en el área privada y en los avisos ----
   Convención de los sistemas de tickets y reparaciones: amarillo = pendiente de nosotros, azul = en camino,
   naranja = en proceso (el del taller; bien distinto del amarillo de Admitida), morado = espera la decisión del cliente, índigo = espera a un proveedor,
   verde = terminado, gris = cerrado. La clave sale de EstadoIncidencia.Clave(). */
.estado-pendiente   { --estado-color: #78909C; --estado-fondo: #ECEFF1; --estado-texto: #37474F; }
.estado-admitida    { --estado-color: #FDD835; --estado-fondo: #FFFDE7; --estado-texto: #665A00; }
.estado-consulta    { --estado-color: #0097A7; --estado-fondo: #E0F7FA; --estado-texto: #006064; }
.estado-transporte  { --estado-color: #1E88E5; --estado-fondo: #E3F2FD; --estado-texto: #0D47A1; }
.estado-taller      { --estado-color: #EF6C00; --estado-fondo: #FFE0B2; --estado-texto: #9A3B00; }
.estado-presupuesto { --estado-color: #8E24AA; --estado-fondo: #F3E5F5; --estado-texto: #5E1675; }
.estado-piezas      { --estado-color: #3949AB; --estado-fondo: #E8EAF6; --estado-texto: #1A237E; }
.estado-finalizada  { --estado-color: #2E7D32; --estado-fondo: #E8F5E9; --estado-texto: #1B5E20; }
.estado-cerrada     { --estado-color: #9E9E9E; --estado-fondo: #F5F5F5; --estado-texto: #616161; }

/* Pastilla: fondo suave, punto del color y texto oscuro (legible sin gritar) */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--estado-texto);
    background-color: var(--estado-fondo);
    border: 1px solid color-mix(in srgb, var(--estado-color) 30%, transparent);
}
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--estado-color); flex: none; }
/* En las tablas, si la columna no da para el nombre entero, la pastilla se parte en dos líneas en vez de montarse sobre la de al lado */
.mud-table-cell .estado { white-space: normal; border-radius: 12px; }

/* Punto suelto (desplegables) y chips de "Filtros activos" */
.estado-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background-color: var(--estado-color); vertical-align: middle; }
.mud-chip.chip-estado { background-color: var(--estado-fondo) !important; color: var(--estado-texto) !important; }

/* Historial: el punto de cada estado con su color */
.estado-linea .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--estado-color) !important; }

/* ---- asat con sus colores: la «a» en negro y «sat» en rojo ---- */
.marca-asat { font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 800; color: #1A1A1A; letter-spacing: -.01em; text-transform: none; }
.marca-asat > span { color: #E30613; }
/* Sobre fondo de color (botón relleno) va en una pastilla blanca para que se lea */
/* Dentro de un botón el texto va en un contenedor flexible que se come el espacio anterior: se repone con margen */
.mud-button-label .marca-asat { margin-left: .35em; }
.mud-button-filled .marca-asat { background: #fff; border-radius: 6px; padding: 0 6px; line-height: 1.45; }


/* Condiciones del servicio del área privada: texto largo en una caja con desplazamiento. */
.condiciones-caja {
    max-height: 46vh;
    overflow-y: auto;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}
.condiciones-servicio p { margin: 0 0 10px 0; font-size: 0.9rem; line-height: 1.45; }
.condiciones-servicio h3 { margin: 14px 0 8px 0; font-size: 1rem; font-weight: 600; }

/* Símbolo de Ayni en la cabecera del personal: con sus colores (verde y naranja), sin fondo; el filete blanco del propio
   SVG (marca/ayni-marca.svg) separa la mitad verde del verde de la barra. */
.marca-barra .marca-simbolo {
    display: inline-flex;
    align-items: center;
}
.marca-barra .marca-simbolo img {
    height: 28px;
    width: 28px;
}