/*============================================================
  INICIO CÓDIGO
  Archivo : C:\xampp\htdocs\tickets\assets\css\styles.css
  Módulo  : Sistema Visual General
  Versión : 1.0.0
  Fase    : 1.1 - Framework Visual
  Proyecto: CONTROL DE TICKETS
============================================================*/

/*------------------------------------------------------------
  1. Variables generales
------------------------------------------------------------*/

:root {
    --color-primario: #1f4e78;
    --color-primario-oscuro: #163a5c;
    --color-primario-claro: #eaf2f8;

    --color-secundario: #2f6f9f;
    --color-acento: #d8a321;

    --color-exito: #198754;
    --color-exito-claro: #d1e7dd;

    --color-advertencia: #b7791f;
    --color-advertencia-claro: #fff3cd;

    --color-peligro: #b42318;
    --color-peligro-claro: #f8d7da;

    --color-informacion: #0b7285;
    --color-informacion-claro: #cff4fc;

    --color-fondo: #f4f6f8;
    --color-superficie: #ffffff;
    --color-superficie-secundaria: #f8fafc;

    --color-texto: #1f2937;
    --color-texto-secundario: #5f6b7a;
    --color-texto-claro: #ffffff;

    --color-borde: #d8e0e8;
    --color-borde-oscuro: #bcc7d3;

    --sombra-suave: 0 2px 8px rgba(15, 23, 42, 0.08);
    --sombra-media: 0 6px 18px rgba(15, 23, 42, 0.12);

    --radio-pequeno: 5px;
    --radio-medio: 8px;
    --radio-grande: 12px;

    --ancho-contenedor: 1280px;

    --fuente-principal:
        Arial,
        Helvetica,
        sans-serif;

    --transicion: 0.2s ease;
}

/*------------------------------------------------------------
  2. Normalización
------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.5;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-primario);
    text-decoration: none;
    transition:
        color var(--transicion),
        background-color var(--transicion),
        border-color var(--transicion);
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--color-borde);
}

/*------------------------------------------------------------
  3. Accesibilidad
------------------------------------------------------------*/

:focus-visible {
    outline: 3px solid rgba(47, 111, 159, 0.35);
    outline-offset: 2px;
}

.solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

/*------------------------------------------------------------
  4. Estructura general
------------------------------------------------------------*/

.aplicacion {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.contenedor {
    width: min(
        calc(100% - 32px),
        var(--ancho-contenedor)
    );
    margin-inline: auto;
}

.contenido-principal {
    flex: 1;
    width: 100%;
    padding: 28px 0 40px;
}

.seccion {
    margin-bottom: 28px;
}

.seccion:last-child {
    margin-bottom: 0;
}

.panel {
    padding: 24px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-suave);
}

.panel-compacto {
    padding: 16px;
}

.panel-sin-sombra {
    box-shadow: none;
}

/*------------------------------------------------------------
  5. Encabezado institucional
------------------------------------------------------------*/

.encabezado-principal {
    background:
        linear-gradient(
            135deg,
            var(--color-primario-oscuro),
            var(--color-primario)
        );
    color: var(--color-texto-claro);
    box-shadow: var(--sombra-suave);
}

.encabezado-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    gap: 24px;
}

.identidad-aplicacion {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.logo-aplicacion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    overflow: hidden;
    background: var(--color-superficie);
    border-radius: var(--radio-medio);
}

.logo-aplicacion img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.identidad-texto {
    min-width: 0;
}

.nombre-aplicacion {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.descripcion-aplicacion {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
}

.encabezado-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usuario-actual {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-align: right;
}

.usuario-actual strong {
    display: block;
    color: var(--color-texto-claro);
}

/*------------------------------------------------------------
  6. Navegación principal
------------------------------------------------------------*/

.navegacion-principal {
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.menu-principal {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
}

.menu-principal li {
    flex: 0 0 auto;
}

.menu-principal a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    color: var(--color-texto);
    border-bottom: 3px solid transparent;
    font-size: 0.94rem;
    font-weight: 600;
    white-space: nowrap;
}

.menu-principal a:hover {
    background: var(--color-primario-claro);
    color: var(--color-primario);
    border-bottom-color: var(--color-secundario);
}

.menu-principal a.activo,
.menu-principal li.activo > a {
    background: var(--color-primario-claro);
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}

/*------------------------------------------------------------
  7. Títulos y encabezados de página
------------------------------------------------------------*/

.encabezado-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.encabezado-pagina-texto {
    min-width: 0;
}

.titulo-pagina {
    margin: 0;
    color: var(--color-texto);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.subtitulo-pagina {
    margin: 8px 0 0;
    color: var(--color-texto-secundario);
    font-size: 0.98rem;
}

.acciones-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.titulo-seccion {
    margin: 0 0 18px;
    color: var(--color-texto);
    font-size: 1.2rem;
    font-weight: 700;
}

.descripcion-seccion {
    margin: -10px 0 18px;
    color: var(--color-texto-secundario);
    font-size: 0.94rem;
}

/*------------------------------------------------------------
  8. Migas de navegación
------------------------------------------------------------*/

.migas-navegacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin: 0 0 14px;
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
    list-style: none;
}

.migas-navegacion li:not(:last-child)::after {
    margin-left: 7px;
    color: var(--color-borde-oscuro);
    content: "/";
}

.migas-navegacion li:last-child {
    color: var(--color-texto);
    font-weight: 600;
}

/*------------------------------------------------------------
  9. Rejillas
------------------------------------------------------------*/

.rejilla {
    display: grid;
    gap: 20px;
}

.rejilla-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.rejilla-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.rejilla-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.rejilla-auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );
}

/*------------------------------------------------------------
  10. Tarjetas
------------------------------------------------------------*/

.tarjeta {
    position: relative;
    padding: 22px;
    overflow: hidden;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-suave);
    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        border-color var(--transicion);
}

.tarjeta:hover {
    transform: translateY(-2px);
    border-color: var(--color-borde-oscuro);
    box-shadow: var(--sombra-media);
}

.tarjeta-titulo {
    margin: 0 0 8px;
    color: var(--color-texto);
    font-size: 1.05rem;
    font-weight: 700;
}

.tarjeta-texto {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: 0.94rem;
}

.tarjeta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

/*------------------------------------------------------------
  11. Indicadores y panel de control
------------------------------------------------------------*/

.indicador {
    display: flex;
    flex-direction: column;
    min-height: 145px;
}

.indicador-etiqueta {
    margin-bottom: 10px;
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.indicador-valor {
    margin-bottom: 8px;
    color: var(--color-primario);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.indicador-detalle {
    margin-top: auto;
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
}

.indicador-exito {
    border-left: 5px solid var(--color-exito);
}

.indicador-advertencia {
    border-left: 5px solid var(--color-advertencia);
}

.indicador-peligro {
    border-left: 5px solid var(--color-peligro);
}

.indicador-informacion {
    border-left: 5px solid var(--color-informacion);
}

/*------------------------------------------------------------
  12. Botones
------------------------------------------------------------*/

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    gap: 8px;
    appearance: none;
    color: var(--color-texto-claro);
    background: var(--color-primario);
    border: 1px solid var(--color-primario);
    border-radius: var(--radio-pequeno);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--transicion),
        border-color var(--transicion),
        color var(--transicion),
        transform var(--transicion);
}

.boton:hover {
    color: var(--color-texto-claro);
    background: var(--color-primario-oscuro);
    border-color: var(--color-primario-oscuro);
}

.boton:active {
    transform: translateY(1px);
}

.boton:disabled,
.boton.deshabilitado {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.boton-secundario {
    color: var(--color-texto);
    background: var(--color-superficie);
    border-color: var(--color-borde-oscuro);
}

.boton-secundario:hover {
    color: var(--color-primario);
    background: var(--color-primario-claro);
    border-color: var(--color-primario);
}

.boton-exito {
    background: var(--color-exito);
    border-color: var(--color-exito);
}

.boton-exito:hover {
    background: #146c43;
    border-color: #146c43;
}

.boton-advertencia {
    background: var(--color-advertencia);
    border-color: var(--color-advertencia);
}

.boton-advertencia:hover {
    background: #955f16;
    border-color: #955f16;
}

.boton-peligro {
    background: var(--color-peligro);
    border-color: var(--color-peligro);
}

.boton-peligro:hover {
    background: #8f1b13;
    border-color: #8f1b13;
}

.boton-informacion {
    background: var(--color-informacion);
    border-color: var(--color-informacion);
}

.boton-informacion:hover {
    background: #095e6d;
    border-color: #095e6d;
}

.boton-pequeno {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.82rem;
}

.boton-grande {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
}

.boton-bloque {
    width: 100%;
}

/*------------------------------------------------------------
  13. Formularios
------------------------------------------------------------*/

.formulario {
    width: 100%;
}

.formulario-rejilla {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.campo {
    min-width: 0;
}

.campo-completo {
    grid-column: 1 / -1;
}

.etiqueta {
    display: block;
    margin-bottom: 7px;
    color: var(--color-texto);
    font-size: 0.9rem;
    font-weight: 700;
}

.requerido {
    color: var(--color-peligro);
}

.control {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-oscuro);
    border-radius: var(--radio-pequeno);
    outline: none;
    transition:
        border-color var(--transicion),
        box-shadow var(--transicion),
        background-color var(--transicion);
}

.control:hover {
    border-color: var(--color-secundario);
}

.control:focus {
    border-color: var(--color-primario);
    box-shadow:
        0 0 0 3px
        rgba(31, 78, 120, 0.14);
}

.control:disabled,
.control[readonly] {
    color: var(--color-texto-secundario);
    background: #eef2f6;
    cursor: not-allowed;
}

textarea.control {
    min-height: 115px;
    resize: vertical;
}

select.control {
    cursor: pointer;
}

.ayuda-campo {
    display: block;
    margin-top: 6px;
    color: var(--color-texto-secundario);
    font-size: 0.82rem;
}

.error-campo {
    display: block;
    margin-top: 6px;
    color: var(--color-peligro);
    font-size: 0.82rem;
    font-weight: 600;
}

.control-invalido {
    border-color: var(--color-peligro);
}

.control-valido {
    border-color: var(--color-exito);
}

.acciones-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 22px;
    border-top: 1px solid var(--color-borde);
}

.grupo-horizontal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grupo-horizontal .control {
    flex: 1;
}

/*------------------------------------------------------------
  14. Casillas y opciones
------------------------------------------------------------*/

.opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-texto);
    cursor: pointer;
}

.opcion input {
    width: 17px;
    height: 17px;
    accent-color: var(--color-primario);
}

/*------------------------------------------------------------
  15. Tablas
------------------------------------------------------------*/

.tabla-contenedor {
    width: 100%;
    overflow-x: auto;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-medio);
}

.tabla {
    width: 100%;
    min-width: 760px;
    background: var(--color-superficie);
}

.tabla th,
.tabla td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
    vertical-align: middle;
}

.tabla th {
    color: var(--color-texto);
    background: #eaf0f6;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tabla tbody tr {
    transition: background-color var(--transicion);
}

.tabla tbody tr:hover {
    background: var(--color-superficie-secundaria);
}

.tabla tbody tr:last-child td {
    border-bottom: 0;
}

.tabla .columna-numero {
    text-align: right;
    white-space: nowrap;
}

.tabla .columna-centro {
    text-align: center;
}

.tabla .columna-acciones {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.tabla-acciones {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.tabla-vacia {
    padding: 32px 20px !important;
    color: var(--color-texto-secundario);
    text-align: center !important;
}

/*------------------------------------------------------------
  16. Filtros y buscadores
------------------------------------------------------------*/

.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 18px;
    margin-bottom: 20px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-medio);
}

.barra-filtros .campo {
    flex: 1 1 190px;
}

.barra-filtros .campo-busqueda {
    flex: 2 1 280px;
}

.acciones-filtros {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

/*------------------------------------------------------------
  17. Mensajes y alertas
------------------------------------------------------------*/

.alerta {
    position: relative;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: var(--radio-medio);
    font-size: 0.92rem;
}

.alerta strong {
    font-weight: 700;
}

.alerta p:last-child {
    margin-bottom: 0;
}

.alerta-exito {
    color: #0f5132;
    background: var(--color-exito-claro);
    border-color: #badbcc;
}

.alerta-advertencia {
    color: #664d03;
    background: var(--color-advertencia-claro);
    border-color: #ffecb5;
}

.alerta-peligro {
    color: #842029;
    background: var(--color-peligro-claro);
    border-color: #f5c2c7;
}

.alerta-informacion {
    color: #055160;
    background: var(--color-informacion-claro);
    border-color: #b6effb;
}

/*------------------------------------------------------------
  18. Etiquetas de estado
------------------------------------------------------------*/

.estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.estado-neutro {
    color: #475569;
    background: #e2e8f0;
}

.estado-exito {
    color: #0f5132;
    background: var(--color-exito-claro);
}

.estado-advertencia {
    color: #664d03;
    background: var(--color-advertencia-claro);
}

.estado-peligro {
    color: #842029;
    background: var(--color-peligro-claro);
}

.estado-informacion {
    color: #055160;
    background: var(--color-informacion-claro);
}

/*------------------------------------------------------------
  19. Resumen de información
------------------------------------------------------------*/

.lista-datos {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(0, 1.7fr);
    margin: 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-medio);
    overflow: hidden;
}

.lista-datos dt,
.lista-datos dd {
    padding: 11px 14px;
    margin: 0;
    border-bottom: 1px solid var(--color-borde);
}

.lista-datos dt {
    background: #eaf0f6;
    font-weight: 700;
}

.lista-datos dd {
    background: var(--color-superficie);
}

.lista-datos dt:last-of-type,
.lista-datos dd:last-of-type {
    border-bottom: 0;
}

/*------------------------------------------------------------
  20. Paginación
------------------------------------------------------------*/

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
}

.paginacion-resumen {
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
}

.paginacion-lista {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.paginacion-lista a,
.paginacion-lista span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
}

.paginacion-lista a:hover {
    color: var(--color-primario);
    background: var(--color-primario-claro);
    border-color: var(--color-primario);
}

.paginacion-lista .activo {
    color: var(--color-texto-claro);
    background: var(--color-primario);
    border-color: var(--color-primario);
}

.paginacion-lista .deshabilitado {
    color: #98a2b3;
    background: #f1f3f5;
    pointer-events: none;
}

/*------------------------------------------------------------
  21. Carga de archivos
------------------------------------------------------------*/

.carga-archivo {
    padding: 24px;
    background: var(--color-superficie-secundaria);
    border: 2px dashed var(--color-borde-oscuro);
    border-radius: var(--radio-medio);
    text-align: center;
    transition:
        border-color var(--transicion),
        background-color var(--transicion);
}

.carga-archivo:hover {
    background: var(--color-primario-claro);
    border-color: var(--color-primario);
}

.carga-archivo-titulo {
    margin-bottom: 7px;
    font-weight: 700;
}

.carga-archivo-texto {
    margin-bottom: 14px;
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
}

/*------------------------------------------------------------
  22. Estado vacío
------------------------------------------------------------*/

.estado-vacio {
    padding: 42px 20px;
    color: var(--color-texto-secundario);
    text-align: center;
}

.estado-vacio h3 {
    margin-bottom: 8px;
    color: var(--color-texto);
}

.estado-vacio p {
    max-width: 560px;
    margin: 0 auto 18px;
}

/*------------------------------------------------------------
  23. Ventanas modales preparadas
------------------------------------------------------------*/

.modal-fondo {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
}

.modal {
    width: min(100%, 620px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-media);
}

.modal-encabezado,
.modal-contenido,
.modal-pie {
    padding: 18px 22px;
}

.modal-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--color-borde);
}

.modal-titulo {
    margin: 0;
    font-size: 1.15rem;
}

.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--color-borde);
}

/*------------------------------------------------------------
  24. Pie de página
------------------------------------------------------------*/

.pie-principal {
    margin-top: auto;
    color: var(--color-texto-secundario);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
}

.pie-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 20px;
    font-size: 0.85rem;
}

.pie-contenido p {
    margin: 0;
}

.pie-version {
    white-space: nowrap;
}

/*------------------------------------------------------------
  25. Clases utilitarias
------------------------------------------------------------*/

.texto-izquierda {
    text-align: left !important;
}

.texto-centro {
    text-align: center !important;
}

.texto-derecha {
    text-align: right !important;
}

.texto-primario {
    color: var(--color-primario) !important;
}

.texto-exito {
    color: var(--color-exito) !important;
}

.texto-advertencia {
    color: var(--color-advertencia) !important;
}

.texto-peligro {
    color: var(--color-peligro) !important;
}

.texto-secundario {
    color: var(--color-texto-secundario) !important;
}

.texto-negrita {
    font-weight: 700 !important;
}

.texto-pequeno {
    font-size: 0.85rem !important;
}

.texto-grande {
    font-size: 1.15rem !important;
}

.mayusculas {
    text-transform: uppercase;
}

.sin-margen {
    margin: 0 !important;
}

.oculto {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-centro {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-entre {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-envolver {
    flex-wrap: wrap;
}

.ancho-completo {
    width: 100%;
}

.separacion-8 {
    gap: 8px;
}

.separacion-12 {
    gap: 12px;
}

.separacion-16 {
    gap: 16px;
}

.margen-superior-8 {
    margin-top: 8px;
}

.margen-superior-16 {
    margin-top: 16px;
}

.margen-superior-24 {
    margin-top: 24px;
}

.margen-inferior-8 {
    margin-bottom: 8px;
}

.margen-inferior-16 {
    margin-bottom: 16px;
}

.margen-inferior-24 {
    margin-bottom: 24px;
}

/*------------------------------------------------------------
  26. Adaptación para tablet
------------------------------------------------------------*/

@media (max-width: 1024px) {
    .rejilla-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rejilla-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .encabezado-pagina {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-pagina {
        justify-content: flex-start;
    }
}

/*------------------------------------------------------------
  27. Adaptación para dispositivos móviles
------------------------------------------------------------*/

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .contenedor {
        width: min(
            calc(100% - 24px),
            var(--ancho-contenedor)
        );
    }

    .contenido-principal {
        padding: 20px 0 30px;
    }

    .encabezado-contenido {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        min-height: auto;
        padding: 18px 0;
    }

    .encabezado-acciones {
        width: 100%;
        justify-content: space-between;
    }

    .usuario-actual {
        text-align: left;
    }

    .menu-principal a {
        min-height: 48px;
        padding-inline: 13px;
    }

    .panel,
    .tarjeta {
        padding: 18px;
    }

    .rejilla-2,
    .rejilla-3,
    .rejilla-4 {
        grid-template-columns: 1fr;
    }

    .formulario-rejilla {
        grid-template-columns: 1fr;
    }

    .campo-completo {
        grid-column: auto;
    }

    .barra-filtros {
        align-items: stretch;
        flex-direction: column;
    }

    .barra-filtros .campo,
    .barra-filtros .campo-busqueda {
        width: 100%;
        flex: 1 1 auto;
    }

    .acciones-filtros {
        width: 100%;
        flex-wrap: wrap;
    }

    .acciones-filtros .boton {
        flex: 1;
    }

    .acciones-formulario {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .acciones-formulario .boton {
        width: 100%;
    }

    .lista-datos {
        grid-template-columns: 1fr;
    }

    .lista-datos dt {
        border-bottom: 0;
    }

    .paginacion {
        align-items: flex-start;
        flex-direction: column;
    }

    .pie-contenido {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 18px 0;
    }
}

/*------------------------------------------------------------
  28. Adaptación para pantallas pequeñas
------------------------------------------------------------*/

@media (max-width: 480px) {
    .logo-aplicacion {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .nombre-aplicacion {
        font-size: 1.15rem;
    }

    .descripcion-aplicacion {
        font-size: 0.82rem;
    }

    .titulo-pagina {
        font-size: 1.45rem;
    }

    .acciones-pagina,
    .tarjeta-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-pagina .boton,
    .tarjeta-acciones .boton {
        width: 100%;
    }

    .grupo-horizontal {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-fondo {
        padding: 10px;
    }

    .modal {
        max-height: calc(100vh - 20px);
    }
}

/*------------------------------------------------------------
  29. Impresión
------------------------------------------------------------*/

@media print {
    body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .encabezado-principal,
    .navegacion-principal,
    .pie-principal,
    .acciones-pagina,
    .acciones-formulario,
    .barra-filtros,
    .boton,
    .paginacion {
        display: none !important;
    }

    .contenido-principal {
        padding: 0;
    }

    .contenedor {
        width: 100%;
        max-width: none;
    }

    .panel,
    .tarjeta,
    .tabla-contenedor {
        box-shadow: none;
        border-color: #999999;
    }

    .tabla {
        min-width: 0;
    }

    .tabla th,
    .tabla td {
        padding: 7px;
        color: #000000;
        border-color: #999999;
    }

    a {
        color: #000000;
        text-decoration: none;
    }
}
/*======================================================
FOOTER
======================================================*/

.footer{

    margin-top:40px;

    background:#0B2E59;

    color:#FFFFFF;

    padding:35px 0 20px;

}

.footer-superior{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    flex-wrap:wrap;

}

.footer-logo-img{

    width:180px;

    height:auto;

}

.footer-datos{

    text-align:right;

}

.footer-datos h3{

    margin-bottom:10px;

    color:#FFFFFF;

}

.footer hr{

    margin:25px 0;

    border:none;

    border-top:1px solid rgba(255,255,255,.20);

}

.footer-inferior{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:15px;

    font-size:.90rem;

}

.footer-inferior strong{

    color:#FFC107;

}

@media(max-width:768px){

.footer-superior{

    flex-direction:column;

    text-align:center;

}

.footer-datos{

    text-align:center;

}

.footer-inferior{

    flex-direction:column;

    text-align:center;

}

.footer-logo-img{

    width:150px;

}

}
/*======================================================
DASHBOARD PRINCIPAL
======================================================*/

.seccion {
    padding: 32px 0;
}

.pagina-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.pagina-encabezado h1 {
    margin: 5px 0 8px;
}

.pagina-encabezado p {
    margin: 0;
    color: #6b7280;
}

.pagina-etiqueta {
    display: block;
    color: #0057b8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.estado-sistema {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.estado-activo {
    color: #166534;
    background: #dcfce7;
}

.card-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.card-etiqueta {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 700;
}

.card h2 {
    margin: 0;
    color: #0b2e59;
    font-size: 2rem;
}

.card-icono {
    font-size: 2rem;
}

.card-enlace {
    display: inline-block;
    margin-top: 12px;
    color: #0057b8;
    font-weight: 700;
    text-decoration: none;
}

.card-enlace:hover {
    text-decoration: underline;
}

.panel {
    margin-top: 28px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(11, 46, 89, 0.08);
}

.panel-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.panel-encabezado h2 {
    margin: 0 0 6px;
    color: #0b2e59;
}

.panel-encabezado p {
    margin: 0;
    color: #6b7280;
}

.acciones-rapidas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.grid-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.lista-proceso {
    margin: 0;
    padding-left: 24px;
}

.lista-proceso li {
    margin-bottom: 18px;
    padding-left: 8px;
}

.lista-proceso strong,
.lista-proceso span {
    display: block;
}

.lista-proceso span {
    margin-top: 4px;
    color: #6b7280;
}

.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 700;
}

.badge-exito {
    color: #166534;
    background: #dcfce7;
}

.badge-pendiente {
    color: #92400e;
    background: #fef3c7;
}

@media (max-width: 900px) {

    .grid-dos-columnas {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

    .pagina-encabezado {
        flex-direction: column;
    }

    .pagina-acciones {
        width: 100%;
    }

    .acciones-rapidas .btn {
        width: 100%;
        text-align: center;
    }

}
/*============================================================
  EOF CÓDIGO
  Archivo : C:\xampp\htdocs\tickets\assets\css\styles.css
============================================================*/