/* Repositorio de Certificados — estilos del sistema (sin dependencias externas) */

:root {
    /* Colores de marca */
    --primario: #246136;          /* verde base */
    --primario-oscuro: #1a4827;
    --primario-claro: #e8f2eb;
    --secundario: #F59100;        /* naranja: acentos (no usar como color de texto sobre blanco) */
    --secundario-claro: #fff3e0;
    --secundario-texto: #8a5200;  /* naranja oscuro legible sobre fondo claro */

    --fondo: #f4f6f4;
    --superficie: #ffffff;
    --borde: #dce3dd;
    --texto: #1f2a22;
    --texto-suave: #5d6b61;
    --peligro: #b3261e;
    --ok-fondo: var(--primario-claro); --ok-texto: var(--primario-oscuro);
    --error-fondo: #fce8e6; --error-texto: #8c1d18;
    --info-fondo: var(--secundario-claro); --info-texto: var(--secundario-texto);
    --radio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
}

a { color: var(--primario); }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 0 0 .6rem; }

/* Barra superior */
/* Barra superior: blanca para que el logo (verde y naranja) se vea bien */
.barra { background: var(--superficie); border-bottom: 3px solid var(--secundario); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.barra-contenido {
    max-width: 1200px; margin: 0 auto; padding: .5rem 1.2rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: .6rem; color: var(--primario); font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.marca img { display: block; }
.barra nav { display: flex; gap: .3rem; flex: 1; }
.barra nav a { color: var(--primario); text-decoration: none; padding: .35rem .8rem; border-radius: 6px; font-weight: 500; border-bottom: 2px solid transparent; }
.barra nav a:hover { background: var(--primario-claro); }
.barra nav a.activo { background: var(--primario-claro); border-bottom-color: var(--secundario); }
.salir { display: flex; align-items: center; gap: .6rem; margin: 0; }
.quien { color: var(--texto-suave); font-size: .9rem; }

/* Contenedor */
.contenido { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.contenido-angosto { max-width: 440px; padding-top: 2.5rem; }

/* Logo en las pantallas de acceso (login, registro, verificación) */
.marca-acceso { text-align: center; margin-bottom: 1.2rem; }
.marca-acceso img { display: inline-block; }
.marca-acceso-nombre { color: var(--primario); font-weight: 700; font-size: 1.15rem; margin-top: .3rem; }
.contenido-angosto .tarjeta { border-top: 4px solid var(--primario); }

.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.8rem;
}

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 1rem; }
.formulario label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; }

input[type=text], input[type=email], input[type=password], input[type=search] {
    font: inherit; padding: .55rem .7rem; border: 1px solid var(--borde);
    border-radius: 6px; background: #fff; width: 100%;
}
input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.oculto { display: none; }

/* Botones */
.btn {
    display: inline-block; font: inherit; font-size: .9rem; cursor: pointer;
    padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--borde);
    background: #fff; color: var(--texto); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--primario-claro); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-oscuro); }
.btn-peligro { color: var(--peligro); border-color: #efc2bf; }
.btn-peligro:hover { background: var(--error-fondo); }
.btn-chico { padding: .25rem .6rem; font-size: .82rem; }
.btn-texto { background: none; border: none; padding: .2rem .4rem; text-decoration: underline; }
.btn-texto:hover { background: none; }

/* Avisos */
.aviso { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.aviso-ok    { background: var(--ok-fondo);    color: var(--ok-texto); }
.aviso-error { background: var(--error-fondo); color: var(--error-texto); }
.aviso-info  { background: var(--info-fondo);  color: var(--info-texto); }

.nota { color: var(--texto-suave); font-size: .85rem; margin: .3rem 0; }
.vacio { color: var(--texto-suave); text-align: center; padding: 2rem; }

/* Migas de pan */
.migas { font-size: 1.05rem; margin-bottom: 1.2rem; word-break: break-word; }
.migas .sep { color: var(--secundario); margin: 0 .35rem; font-weight: 700; }
.migas strong { color: var(--primario); }

/* Paneles de acción */
.acciones-carpeta { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.panel-accion {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1rem 1.2rem;
    display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
}
.panel-accion h2 { color: var(--primario); }
.panel-accion input[type=file] { max-width: 100%; }
.lista-seleccion { font-size: .85rem; margin: 0; padding-left: 1.2rem; color: var(--texto-suave); max-height: 9rem; overflow: auto; }
.destino {
    margin: 0; padding: .35rem .7rem; border-left: 4px solid var(--secundario);
    background: var(--secundario-claro); border-radius: 4px; font-size: .9rem; word-break: break-word;
}
.casilla { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.casilla input { margin-top: .25rem; accent-color: var(--primario); }

/* Cuadro de confirmación */
.dialogo {
    border: none; border-radius: 10px; padding: 0; max-width: 540px; width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0,0,0,.25); color: var(--texto);
}
.dialogo::backdrop { background: rgba(20, 35, 25, .45); }
.dialogo form { padding: 1.4rem 1.5rem 1.2rem; border-top: 5px solid var(--secundario); }
.dialogo h2 { font-size: 1.15rem; margin-bottom: .8rem; color: var(--primario); }
.dialogo-cuerpo p { margin: .4rem 0; }
.dialogo-ruta {
    font-size: 1.05rem; font-weight: 700; color: var(--primario-oscuro); word-break: break-word;
    background: var(--primario-claro); border-left: 4px solid var(--primario); padding: .55rem .8rem; border-radius: 4px;
}
.dialogo-url { font-size: .82rem; color: var(--texto-suave); word-break: break-all; }
.dialogo-alerta {
    background: var(--secundario-claro); color: var(--secundario-texto); border-left: 4px solid var(--secundario);
    padding: .5rem .8rem; border-radius: 4px; font-weight: 500;
}
.dialogo-cuerpo ul { margin: .3rem 0; padding-left: 1.2rem; font-size: .88rem; max-height: 8rem; overflow: auto; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.dialogo.peligro form { border-top-color: var(--peligro); }
.dialogo.peligro #dialogo-ok { background: var(--peligro); border-color: var(--peligro); }

/* Filtro */
.filtro { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.filtro input { max-width: 380px; }

/* Tablas */
.tabla {
    width: 100%; border-collapse: collapse; background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.tabla th, .tabla td { padding: .55rem .8rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.tabla th { background: var(--primario); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #fff; font-weight: 600; }
.tabla tbody tr:hover { background: #f7faf8; }
.tabla tbody tr:last-child td { border-bottom: none; }
.col-tamano, .col-fecha { white-space: nowrap; color: var(--texto-suave); font-size: .88rem; }
.col-acciones { white-space: nowrap; }
.col-acciones form { display: inline-block; margin: 0 .15rem 0 0; }
.col-acciones > .btn { margin-right: .15rem; }
.detalle { word-break: break-all; font-size: .88rem; }

.item-carpeta, .item-pdf { text-decoration: none; word-break: break-word; }
.item-carpeta::before { content: "📁 "; }
.item-pdf::before { content: "📄 "; }
.item-carpeta:hover, .item-pdf:hover { text-decoration: underline; }

/* Etiquetas de estado */
.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 500; }
.etiqueta-verde { background: var(--ok-fondo); color: var(--ok-texto); }
.etiqueta-ambar { background: var(--secundario-claro); color: var(--secundario-texto); }
.etiqueta-gris  { background: #eceff3; color: var(--texto-suave); }
.etiqueta-principal { background: var(--primario); color: #fff; }
.fila-principal td:first-child { box-shadow: inset 4px 0 0 var(--secundario); font-weight: 600; }

.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* ===========================================================================
 * RESPONSIVE
 * ========================================================================= */

img { max-width: 100%; height: auto; }
.marca img { width: 40px; height: 40px; }

/* Tablets y pantallas medianas */
@media (max-width: 900px) {
    .acciones-carpeta { grid-template-columns: 1fr; }
}

/* Celulares */
@media (max-width: 700px) {
    body { font-size: 15px; }
    h1 { font-size: 1.3rem; }

    /* Evita que iOS haga zoom al tocar un campo (necesita >= 16px). */
    input[type=text], input[type=email], input[type=password], input[type=search] { font-size: 16px; }

    /* Barra superior: logo + usuario en la primera línea, menú debajo a todo el ancho */
    .barra-contenido { padding: .5rem 1rem; gap: .5rem 1rem; }
    .marca { flex: 1; min-width: 0; font-size: .95rem; }
    .marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .marca img { width: 34px; height: 34px; }
    .salir { order: 2; }
    .quien { display: none; }
    .barra nav {
        order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--borde); padding-top: .4rem; scrollbar-width: none;
    }
    .barra nav::-webkit-scrollbar { display: none; }
    .barra nav a { flex: 1; text-align: center; white-space: nowrap; padding: .5rem .6rem; }

    .contenido { padding: 1rem 1rem 2.5rem; }
    .contenido-angosto { padding-top: 1.5rem; }
    .marca-acceso img { width: 84px; height: 84px; }
    .tarjeta { padding: 1.3rem 1.1rem; }

    /* Botones más fáciles de tocar */
    .btn { padding: .65rem 1rem; }
    .btn-chico { padding: .5rem .75rem; font-size: .88rem; }
    .panel-accion .btn-primario, .formulario .btn-primario { width: 100%; text-align: center; }
    .panel-accion { padding: 1rem; }
    .panel-accion input[type=file] { width: 100%; }

    .migas { font-size: .95rem; }

    .filtro { flex-direction: column; align-items: stretch; gap: .3rem; }
    .filtro input { max-width: none; }

    /* Tablas → tarjetas: cada fila es un bloque y cada celda muestra su etiqueta */
    .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
    .tabla-tarjetas { border: none; background: none; }
    .tabla-tarjetas thead { display: none; }
    .tabla-tarjetas tr {
        background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
        margin-bottom: .7rem; padding: .7rem .9rem; overflow: hidden;
    }
    .tabla-tarjetas tbody tr:hover { background: var(--superficie); }
    .tabla-tarjetas td { border: none; padding: .2rem 0; }
    .tabla-tarjetas td[data-label] { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; }
    .tabla-tarjetas td[data-label]::before {
        content: attr(data-label); flex: 0 0 6.6rem; color: var(--texto-suave); font-weight: 600;
    }
    .tabla-tarjetas td[data-label] > .etiqueta { flex: 0 1 auto; }
    .tabla-tarjetas td[data-label]:empty { display: none; }
    .tabla-tarjetas td.celda-nombre { font-size: 1rem; font-weight: 600; padding-bottom: .35rem; word-break: break-word; }
    .tabla-tarjetas td.celda-vacia { display: none; }
    .tabla-tarjetas td.col-acciones {
        white-space: normal; display: flex; flex-wrap: wrap; gap: .4rem;
        border-top: 1px solid var(--borde); margin-top: .5rem; padding-top: .6rem;
    }
    .tabla-tarjetas td.col-acciones:empty { display: none; }
    .tabla-tarjetas .col-acciones form, .tabla-tarjetas .col-acciones > .btn { margin: 0; }
    .tabla-tarjetas .celda-correo { overflow-wrap: anywhere; min-width: 0; }
    .tabla-tarjetas .detalle { overflow-wrap: anywhere; word-break: normal; }
    .tabla-tarjetas .vacio { text-align: center; }
    .fila-principal { box-shadow: inset 4px 0 0 var(--secundario); }
    .fila-principal td:first-child { box-shadow: none; }

    /* Cuadro de confirmación casi a pantalla completa, botones apilados */
    .dialogo { width: calc(100% - 1.5rem); max-height: calc(100% - 2rem); }
    .dialogo form { padding: 1.1rem 1.1rem 1rem; }
    .dialogo-botones { flex-direction: column-reverse; }
    .dialogo-botones .btn { width: 100%; text-align: center; }

    .paginacion { flex-wrap: wrap; gap: .5rem; }
}