:root {
    --fondo: #f6f4f1;
    --superficie: #ffffff;
    --texto: #1f1d1b;
    --sutil: #6b665f;
    --borde: #e3ded6;
    --acento: #8a6a3b;
    --acento-hover: #6f5430;
    --exito-fondo: #e8f4ea;
    --exito-texto: #1d5c2b;
    --error-fondo: #fbe9e7;
    --error-texto: #8c2a1c;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #161514;
        --superficie: #211f1d;
        --texto: #eeeae4;
        --sutil: #a29b91;
        --borde: #36322e;
        --acento: #c9a46b;
        --acento-hover: #dcbb86;
        --exito-fondo: #173020;
        --exito-texto: #9fd8ab;
        --error-fondo: #3a1b16;
        --error-texto: #f2aa9d;
        --sombra: none;
    }
}

* { box-sizing: border-box; }

/* Ninguna imagen puede ser más ancha que su contenedor */
img { max-width: 100%; height: auto; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
a { color: var(--acento); }
.sutil { color: var(--sutil); margin-top: 0; }

/* Barra superior */
.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; text-decoration: none; color: var(--texto); font-size: 1.1rem; }
.menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.menu a, .menu-salir button {
    padding: .45rem .75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--texto);
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.menu a:hover, .menu-salir button:hover { background: var(--fondo); }
.menu a.activo { background: var(--fondo); color: var(--acento); font-weight: 600; }
.menu-salir { margin: 0; }
.menu-boton { display: none; }

@media (max-width: 720px) {
    .menu-boton {
        display: block;
        background: none;
        border: 1px solid var(--borde);
        border-radius: 8px;
        padding: .4rem .8rem;
        color: var(--texto);
        font: inherit;
    }
    .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; }
    .menu.abierto { display: flex; }
    .menu-salir button { width: 100%; text-align: left; }
}

/* Contenido */
.contenido { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    margin-top: 1rem;
}
.tarjeta-login { max-width: 400px; margin: 10vh auto 0; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tarjeta-accion { text-decoration: none; color: inherit; transition: border-color .15s; }
.tarjeta-accion:hover { border-color: var(--acento); }
.tarjeta-accion h2 { color: var(--acento); }
.tarjeta-accion p { margin: 0; color: var(--sutil); }

/* Formularios */
.formulario { display: grid; gap: .9rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.formulario-2col { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; }
.formulario-2col > * { min-width: 0; }
.texto-etiqueta .sutil { font-weight: 400; }
.formulario-linea { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

input, select, textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
    font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.formulario-linea input { flex: 1; min-width: 180px; width: auto; }

.boton, .boton-sec {
    display: inline-block;
    padding: .6rem 1.1rem;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--acento);
}
.boton { background: var(--acento); color: #fff; }
.boton:hover { background: var(--acento-hover); }
.boton-sec { background: none; color: var(--acento); padding: .35rem .7rem; font-size: .88rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .75rem; }
.aviso-exito { background: var(--exito-fondo); color: var(--exito-texto); }
.aviso-error { background: var(--error-fondo); color: var(--error-texto); }

/* Tablas */
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { color: var(--sutil); font-weight: 600; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.acciones form { margin: 0; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

.etiqueta { padding: .15rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; }
.etiqueta-ok { background: var(--exito-fondo); color: var(--exito-texto); }
.etiqueta-off { background: var(--error-fondo); color: var(--error-texto); }

/* Pedidos */
.aviso-info { background: var(--fondo); border: 1px solid var(--acento); color: var(--texto); }
.boton-grande { padding: .7rem 1.2rem; font-size: 1rem; justify-self: start; }
.boton:disabled, .boton-sec:disabled { opacity: .6; cursor: wait; }
.grupo-opciones { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.grupo-opciones legend { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.formulario label.opcion, .opcion { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.opcion input { width: auto; }
.oculto { display: none !important; }
.etiqueta-neutra { background: var(--fondo); color: var(--sutil); border: 1px solid var(--borde); }

/* Panel de pedidos */
:root {
    --reservado-fondo: #e7effc; --reservado-texto: #1e4fa3;
    --elaboracion-fondo: #fdf1dc; --elaboracion-texto: #8a5a00;
    --enviado-fondo: #efe8fb; --enviado-texto: #5b2fa6;
    --entregado-fondo: var(--exito-fondo); --entregado-texto: var(--exito-texto);
    --cancelado-fondo: #ecebea; --cancelado-texto: #5f5b56;
}
@media (prefers-color-scheme: dark) {
    :root {
        --reservado-fondo: #1a2a44; --reservado-texto: #9cc0f5;
        --elaboracion-fondo: #3a2c12; --elaboracion-texto: #f0c979;
        --enviado-fondo: #2c2142; --enviado-texto: #c9b1f2;
        --cancelado-fondo: #2c2a28; --cancelado-texto: #a8a29a;
    }
}
.estado-reservado { background: var(--reservado-fondo); color: var(--reservado-texto); }
.estado-en-elaboracion { background: var(--elaboracion-fondo); color: var(--elaboracion-texto); }
.estado-enviado { background: var(--enviado-fondo); color: var(--enviado-texto); }
.estado-entregado { background: var(--entregado-fondo); color: var(--entregado-texto); }
.estado-cancelado { background: var(--cancelado-fondo); color: var(--cancelado-texto); }

.encabezado-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.etiqueta-estado { padding: .3rem .8rem; border-radius: 99px; font-weight: 600; font-size: .9rem; }

.filtros { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .75rem; }
.filtros a {
    padding: .4rem .8rem; border-radius: 99px; border: 1px solid var(--borde);
    background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .9rem;
}
.filtros a span { color: var(--sutil); margin-left: .2rem; }
.filtros a.activo { border-color: var(--acento); color: var(--acento); font-weight: 600; }

.busqueda { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.busqueda input { flex: 1; min-width: 200px; width: auto; }

.tarjeta-tabla { padding: .5rem 1rem; }
.pequeno { font-size: .82rem; }
.celda-detalle { max-width: 260px; }
.cambio-estado { margin: 0; }
.cambio-estado select { font-weight: 600; border: 0; padding: .4rem .6rem; min-width: 150px; }
.fecha-atrasada { color: var(--error-texto); font-weight: 600; }
.fecha-hoy { font-weight: 600; }
.etiqueta-hoy { background: var(--elaboracion-fondo); color: var(--elaboracion-texto); }

.paginacion { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }
.texto-original { white-space: normal; background: var(--fondo); padding: .75rem 1rem; border-radius: 8px; margin: 0; }
.historial { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.historial li { display: flex; flex-direction: column; border-left: 3px solid var(--borde); padding-left: .75rem; }

/* En el celular cada pedido se muestra como tarjeta */
@media (max-width: 720px) {
    .tabla-pedidos thead { display: none; }
    .tabla-pedidos, .tabla-pedidos tbody, .tabla-pedidos tr, .tabla-pedidos td { display: block; width: 100%; }
    .tabla-pedidos tr { border-bottom: 1px solid var(--borde); padding: .75rem 0; }
    .tabla-pedidos td { border: 0; padding: .2rem 0; max-width: none; }
    .tabla-pedidos td::before { content: attr(data-etiqueta); display: block; font-size: .75rem; color: var(--sutil); }
    .cambio-estado select { width: 100%; }
}

/* Diseños */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr)); gap: 1rem; margin-top: .75rem; }
.galeria-compacta { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .6rem; }
.tarjeta-diseno { margin: 0; padding: .6rem; text-decoration: none; color: inherit; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; overflow-wrap: anywhere; }
.tarjeta-diseno:hover { border-color: var(--acento); }
.miniatura { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--borde); }
.miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sello-estado { padding: .2rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.miniatura .sello-estado { position: absolute; top: .4rem; left: .4rem; }
.sello-pendiente, .sello-procesando { background: var(--elaboracion-fondo); color: var(--elaboracion-texto); }
.sello-listo { background: var(--exito-fondo); color: var(--exito-texto); }
.sello-error { background: var(--error-fondo); color: var(--error-texto); }

/* min-width: 0 evita que el tamaño real de la foto ensanche la columna y se salga de la pantalla */
.comparacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.comparacion figure { margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; min-width: 0; }
.comparacion figcaption { font-weight: 600; }
.comparacion img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; border: 1px solid var(--borde); background: #fff; }
.comparacion .boton, .comparacion .boton-sec { justify-self: start; text-decoration: none; }
.espacio-resultado { aspect-ratio: 1; display: grid; place-items: center; border: 1px dashed var(--borde); border-radius: 8px; }

.girador { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--borde); border-top-color: var(--acento); border-radius: 50%; animation: girar 1s linear infinite; vertical-align: -.15em; margin-right: .35rem; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girador { animation: none; } }

.zona-peligro { margin-top: 1.5rem; }
.boton-peligro { background: none; border: 1px solid var(--error-texto); color: var(--error-texto); padding: .5rem 1rem; border-radius: 8px; font: inherit; cursor: pointer; }
.texto-prompt { font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
pre.texto-prompt { background: var(--fondo); padding: .75rem; border-radius: 8px; max-height: 320px; overflow: auto; }
.formulario-linea select { flex: 1; min-width: 200px; width: auto; }
.botones { display: flex; gap: .75rem; flex-wrap: wrap; }
.sello-sin-ia { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }