/* Estilos de Software de Ingeniería 2027 (Blazor Server) */

:root {
    --color-principal: #205375;
    --color-acento: #f0a13a;
    --color-fondo: #f4f6f8;
    --color-borde: #d7dde3;
    --color-texto: #222;
    --color-tarjeta: #fff;
    --color-titulo: #205375;
    --color-ok: #1e7d32;
    --color-error: #b3261e;
    /* Textos calculados por MainLayout según el tema activo, para que
       los botones siempre se lean (en temas oscuros el texto fijo
       #222 sobre un acento oscuro no se veía). Si no hay tema en la
       base, estos valores por defecto son los que se usan. */
    --color-texto-acento: #222;
    --color-texto-principal: #fff;
    --color-texto-tarjeta: #222;
    --color-peligro: #b3261e;
    /* Color del título del producto sobre el FONDO general (detalle
       del producto): si el color de título del tema no se lee sobre
       el fondo, se usa el color de texto del tema. */
    --color-titulo-fondo: #205375;
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* Los enlaces sobre el fondo general usan el color de título
   adaptado al fondo (si el color de título del tema no se lee sobre
   el fondo oscuro, se usa el color de texto del tema). Sobre las
   tarjetas, los enlaces usan el color de título del tema, que es
   el que se lee sobre la tarjeta. */
a { color: var(--color-titulo-fondo); }
.panel a, .compra a, .comentario a, .tarjeta a, .item-orden a { color: var(--color-titulo); }

.barra-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-principal);
    padding: 10px 20px;
}

.marca {
    color: var(--color-texto-principal);
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}

/* Nombre del sitio + la etiqueta "Admin" (una sola vez, aquí arriba). */
.marca-grupo { display: flex; align-items: center; gap: 10px; }
.etiqueta-admin {
    background: var(--color-acento);
    color: var(--color-texto-acento);
    font-size: .75rem;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 20px;
}

/* Barra de administración (debajo de la barra superior, solo la ve
   el admin): los menús agrupados, sin repetir "Admin" en cada enlace. */
.menu-admin {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px 16px;
    background: var(--color-principal);
    border-bottom: 2px solid var(--color-acento);
    padding: 8px 20px;
}
.menu-admin a { color: var(--color-texto-principal); text-decoration: none; }
.menu-admin a.active { text-decoration: underline; font-weight: bold; }
/* Un grupo de menús: sus enlaces se separan con "·". */
.grupo-menu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sep { color: var(--color-texto-principal); opacity: .6; }
/* Barra vertical entre grupos. */
.sep-grupo { width: 1px; align-self: stretch; background: var(--color-texto-principal); opacity: .4; }

.menu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu a { color: var(--color-texto-principal); text-decoration: none; }
.menu a.active { text-decoration: underline; font-weight: bold; }
.menu-usuario { color: var(--color-texto-principal); }
.form-salir { display: inline; }
.enlace-boton {
    background: none; border: none; color: var(--color-texto-principal);
    cursor: pointer; font: inherit; padding: 0;
}

.pie {
    text-align: center;
    color: var(--color-texto);
    opacity: .75;
    font-size: .85rem;
    padding: 18px;
}

.contenedor { max-width: 1100px; margin: 0 auto; padding: 20px; }
.contenedor.estrecho { max-width: 520px; }
.subtitulo { color: var(--color-texto); opacity: .8; }

/* Chips de tags */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.chip {
    border: 1px solid var(--color-titulo);
    background: var(--color-tarjeta);
    color: var(--color-titulo);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}
.chip-activo { background: var(--color-principal); color: var(--color-texto-principal); }

/* Catálogo */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}
.tarjeta {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
}
.tarjeta-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.tarjeta-cuerpo { padding: 14px; }
.tarjeta-cuerpo h2 { margin: 0 0 6px; font-size: 1.1rem; }
/* El título del producto lleva su propio color del tema, distinto
   al texto de la descripción, para que resalte como en un folleto. */
.tarjeta-cuerpo h2, .tarjeta-cuerpo h2 a { color: var(--color-titulo); text-decoration: none; }
/* En el detalle el título va sobre el fondo general, no sobre una
   tarjeta: usa el color de título adaptado al fondo. */
.titulo-producto { color: var(--color-titulo-fondo); }
.precio { font-size: 1.15rem; font-weight: bold; color: var(--color-titulo); }
.precio-grande { font-size: 1.8rem; font-weight: bold; color: var(--color-titulo); }
/* Precio de lista tachado cuando hay promoción vigente. */
.precio-antes { text-decoration: line-through; opacity: .65; font-size: .95rem; margin: 0 0 2px; }
/* Etiqueta del porcentaje de descuento (-10%) sobre el precio. */
.etiqueta-descuento { background: #c62828; color: #fff; font-size: .8rem; font-weight: bold; padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
/* Aviso de la promoción vigente en el catálogo (usa el acento del tema). */
.aviso-promo { background: var(--color-acento); color: var(--color-texto-acento); font-weight: bold; padding: 10px 14px; border-radius: 8px; }
/* Nota pequeña de la promoción en el detalle del producto. */
.nota-promo { font-size: .9rem; opacity: .85; }
.tags-linea { margin: 6px 0; }
.tag-mini {
    background: #eef3f7;
    color: #222;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: .8rem;
    margin-right: 5px;
}

.boton {
    display: inline-block;
    background: var(--color-acento);
    color: var(--color-texto-acento);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-top: 8px;
}
.boton-secundario {
    background: var(--color-tarjeta);
    color: var(--color-texto-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    margin-left: 8px;
}
.boton-mini {
    border: 1px solid var(--color-borde);
    background: var(--color-tarjeta);
    color: var(--color-texto-tarjeta);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    margin-right: 4px;
}
.boton-mini.peligro { color: var(--color-peligro); border-color: var(--color-peligro); }
.boton:disabled { opacity: .6; cursor: wait; }

/* Detalle y galería */
.detalle-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
}
@media (max-width: 760px) {
    .detalle-grid { grid-template-columns: 1fr; }
}
.galeria-principal {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
}
.miniaturas { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.miniatura {
    width: 76px; height: 56px; object-fit: cover;
    border: 2px solid transparent; border-radius: 6px; cursor: pointer;
}
.miniatura-activa { border-color: var(--color-acento); }
.compra {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 18px;
}
.input-cantidad { width: 90px; padding: 7px; font-size: 1rem; background: var(--color-tarjeta); color: var(--color-texto-tarjeta); border: 1px solid var(--color-borde); border-radius: 6px; }
.nota-paypal { font-size: .75rem; text-align: center; color: var(--color-texto-tarjeta); opacity: .75; }

/* Buscador del catálogo */
.buscador { max-width: 480px; margin-top: 14px; }

/* Formularios */
.campo { margin-bottom: 12px; }
.campo-check { margin: 12px 0; }
.campo-check label { font-weight: normal; cursor: pointer; }
.campo label { display: block; font-weight: 600; margin-bottom: 4px; }
/* Los campos de texto van sobre el fondo de tarjeta (blanco u
   oscuro según el tema), así que su texto usa el color calculado
   para tarjetas, no el del tema. */
.input-texto {
    width: 100%;
    padding: 9px;
    border: 1px solid var(--color-borde);
    background: var(--color-tarjeta);
    color: var(--color-texto-tarjeta);
    border-radius: 6px;
    font: inherit;
}
.campos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

/* Mensajes: cada uno lleva su propio fondo claro, así el verde y el
   rojo se leen igual con un tema oscuro que con uno claro. */
.mensaje-ok {
    color: var(--color-ok);
    background: #e6f4ea;
    border: 1px solid #a8d5b5;
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
}
.mensaje-error {
    color: var(--color-error);
    background: #fdecea;
    border: 1px solid #e5a09a;
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
}
.mensaje-aviso {
    color: #5a4a00;
    background: #fff3cd;
    border: 1px solid #e3cf7a;
    border-radius: 8px;
    padding: 10px;
}

/* Comentarios: espacios cortos para que el cliente no se pierda
   entre un comentario y otro; lo mismo en teléfono, tableta y PC.
   (Sin estos márgenes, el navegador deja ~16-20px arriba y abajo
   de cada título y párrafo.) */
.comentarios { margin-top: 20px; }
.comentarios h2 { margin: 0 0 8px; }
.comentarios h3 { margin: 14px 0 6px; }
.comentarios > p { margin: 4px 0; }
.comentarios .boton { margin-top: 8px; }
.comentario {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.comentario .fecha { color: var(--color-texto-tarjeta); opacity: .7; font-size: .85rem; margin-left: 8px; }
/* El texto del comentario va pegado al nombre y a los botones: sin
   este margen el navegador deja ~16px arriba y abajo del párrafo. */
.comentario p { margin: 2px 0 4px; }

/* Hilos de comentarios tipo blog: las respuestas van con sangría
   y una línea a la izquierda, debajo del comentario al que responden. */
.respuestas { margin-left: 28px; border-left: 3px solid var(--color-borde); padding-left: 14px; }
/* Botones pequeños tipo enlace debajo de cada comentario. */
.acciones-comentario { margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }
.enlace-accion {
    background: none; border: none; color: var(--color-titulo);
    cursor: pointer; font: inherit; font-size: .85rem; padding: 0;
    text-decoration: underline;
}
/* Enlace "Ver N respuestas" / "Ocultar respuestas" debajo del comentario. */
.ver-respuestas { margin-top: 4px; }

/* Aviso de reconexión propio: un aviso pequeño abajo en el centro,
   en vez del cuadro grande del sistema ("Attempting to reconnect...").
   Blazor muestra/oculta este elemento cambiando su clase: show
   (reintentando), failed (ya no pudo) y rejected (el servidor la
   rechazó). */
#components-reconnect-modal {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    background: #333;
    color: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    font-size: .95rem;
    max-width: 90vw;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal .reconnect-fallo { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-reintentando,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reintentando { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-fallo,
#components-reconnect-modal.components-reconnect-rejected .reconnect-fallo { display: inline; }
#components-reconnect-modal .reconnect-fallo button {
    background: #fff;
    color: #222;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    margin-left: 8px;
    cursor: pointer;
    font: inherit;
}
.form-respuesta { margin-top: 10px; }
.etiqueta-alerta {
    display: inline-block;
    background: #fdecea;
    color: var(--color-error);
    border: 1px solid #e5a09a;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 600;
    margin-left: 8px;
}
.etiqueta-info {
    display: inline-block;
    background: #eef3f8;
    color: var(--color-titulo);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 600;
    margin-left: 8px;
}

/* Administración */
/* Texto sobre tarjetas: el color de texto del tema va sobre el fondo
   general, pero las tarjetas tienen su propio fondo (claro u oscuro
   según el tema). Todo el texto que va sobre una tarjeta — paneles de
   administración, caja de compra, comentarios, tarjetas del catálogo
   y la lista de orden — usa el color calculado para tarjetas, así se
   lee igual con un tema oscuro que con uno claro. Los elementos con
   color propio (botones, títulos, precios, etiquetas) no cambian. */
.panel, .compra, .comentario, .item-orden, .tarjeta { color: var(--color-texto-tarjeta); }
.panel .subtitulo { color: var(--color-texto-tarjeta); }
.panel {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 18px;
    margin: 18px 0;
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td {
    border-bottom: 1px solid var(--color-borde);
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
.fila-error { background: #fdecea; color: #7a1a14; }

/* Lista de orden arrastrable */
.lista-orden { list-style: none; padding: 0; margin: 0; }
.item-orden {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: grab;
}
.item-orden.arrastrando { opacity: .5; }
.item-orden .posicion {
    background: var(--color-principal);
    color: var(--color-texto-principal);
    border-radius: 50%;
    width: 26px; height: 26px;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
}
.item-orden .manija { color: var(--color-texto-tarjeta); opacity: .6; }
.estado-mini { color: var(--color-texto); opacity: .7; }

/* Responsivo: PC ancha, tablet y móvil.
   - PC ancha: el contenido queda centrado con un ancho máximo de
     1100px (.contenedor), no se estira hasta los bordes.
   - Tablet y móvil: la rejilla del catálogo pasa a 1-2 columnas sola
     (minmax 250px), el detalle pasa a una columna (ver .detalle-grid)
     y los formularios se apilan (.campos-grid).
   - Las tablas de administración tienen muchas columnas: en pantallas
     angostas se desplazan de lado en vez de cortarse o romper el diseño. */
@media (max-width: 900px) {
    .contenedor { padding: 16px; }
    /* En tableta los hilos ocupan menos ancho */
    .respuestas { margin-left: 20px; }
}
@media (max-width: 760px) {
    .contenedor { padding: 12px; }
    .barra-superior { padding: 10px 12px; }
    .marca { font-size: 1.1rem; }
    .menu { gap: 10px; }
    .tabla { display: block; overflow-x: auto; white-space: nowrap; }
    .precio-grande { font-size: 1.4rem; }
    .galeria-principal { max-height: 300px; }
    .respuestas { margin-left: 14px; padding-left: 10px; }
    /* En teléfono los comentarios van aún más compactos */
    .comentarios { margin-top: 16px; }
    .comentarios h3 { margin: 10px 0 6px; }
    .comentario { padding: 8px 12px; }
}

/* Muestras de color en la tabla de temas */
.muestra-color {
    display: inline-block;
    width: 22px; height: 22px;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    margin-right: 3px;
    vertical-align: middle;
}

/* Fondo animado (canvas de cometas): fijo detrás del contenido y
   sin estorbar los clics. El contenido (.page) queda por encima. */
.fondo-animado {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.page { position: relative; z-index: 1; }