/* --- Importación de la fuente --- */
@font-face {
    font-family: 'ubuntu';
    font-style: normal;
    font-weight: normal; /* Usamos 'normal' en lugar de 'big' */
    src: url(Ubuntu.ttf); /* Asume que Ubuntu.ttf está en la misma carpeta */
}

/* --- Estilos Globales --- */
body {
    font-family: 'ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e9ecef; /* Fondo más oscuro para contraste */
    color: #333;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra todo horizontalmente */
    min-height: 100vh;
}

/* --- Cabecera y Logo --- */
.main-header {
    margin: 2rem 0; /* 2rem = 32px (aprox) */
    text-align: center;
}

.main-header img {
    height: 120px; /* Un tamaño de logo más contenido */
    max-width: 90%;
    object-fit: contain;
}

/* --- Contenedor del Menú --- */
.menu-container {
    width: 100%;
    max-width: 600px; /* Limita el ancho del menú para legibilidad */
    padding: 0 1rem; /* Espacio en los lados en móviles */
    box-sizing: border-box; /* Importante para que el padding no sume al ancho */
}

/* --- Navegación Principal --- */
.main-nav ul {
    list-style: none; /* Quita los puntos de la lista */
    margin: 0;
    padding: 0;
}

.main-nav li {
    margin-bottom: 1rem; /* Espacio entre cada "botón" */
}

.main-nav a {
    display: block; /* Hace que el link ocupe todo el espacio */
    text-decoration: none;
    font-size: 1.2rem; /* Texto más grande */
    font-weight: 600; /* Texto más intenso / semi-negrita */
    color: #1a252f; /* Color de texto más oscuro */
    background-color: #ffffff; /* Fondo blanco para los botones */
    padding: 1.25rem; /* Espaciado interno generoso */
    text-align: center;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    
    /* Transición suave para el efecto hover */
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón */
.main-nav a:hover,
.main-nav a:focus {
    transform: translateY(-3px); /* "Levanta" el botón ligeramente */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: #fdfdfd;
}

/* --- Estilo especial para el link de descarga --- */
.main-nav a.link-descarga {
    background-color: #e8f5e9; /* Un color verde pálido */
    color: #2e7d32; /* Color de texto verde oscuro */
    font-weight: 600;
}

.main-nav a.link-descarga:hover,
.main-nav a.link-descarga:focus {
    background-color: #dcedc8; /* Verde un poco más oscuro al pasar el ratón */
}

/* --- Estilo para botones secundarios o "Volver" (EN MENÚS) --- */
.main-nav a.link-volver {
    background-color: #f1f3f5; /* Un fondo gris claro, diferente al blanco */
    color: #495057; /* Un color de texto más suave */
    font-weight: 500;
}

.main-nav a.link-volver:hover,
.main-nav a.link-volver:focus {
    background-color: #e9ecef; /* Se oscurece un poco al pasar el ratón */
}

/* --- --- --- --- --- --- --- --- --- --- */
/* --- SECCIÓN DE ESTILOS DE FORMULARIOS --- */
/* --- --- --- --- --- --- --- --- --- --- */

/* Contenedor para la página del formulario */
.form-page-container {
    width: 100%;
    max-width: 1040px; /* Ancho estándar para formularios */
    padding: 0 1rem; 
    box-sizing: border-box;
    margin-bottom: 3rem; /* Espacio al final */
}

/* Contenedor estándar de página */
.page-container {
    width: 100%;
    margin: 0 auto; /* Centrar */
    padding: 0 1rem;
    box-sizing: border-box;
    margin-bottom: 3rem;
}

/* En pantallas grandes (ordenadores), limitamos al 70% */
@media (min-width: 1024px) {
    .page-container {
        max-width: 70%;
    }
}

/* Contenedor MÁS ANCHO para listas y tablas de datos */
.wide-page-container {
    width: 100%;
    max-width: 1200px; /* Ancho extra para tablas con muchos datos */
    padding: 0 1rem; 
    box-sizing: border-box;
    margin-bottom: 3rem; /* Espacio al final */
}


/* El "papel" blanco donde va el formulario */
.form-container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-top: 1rem;
}

.form-container h2,
.form-page-container h2,
.wide-page-container h2 { /* Aplicamos título al nuevo contenedor */
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
    color: #1a252f;
}

/* Agrupador de secciones (para "Identificación", "Datos", etc.) */
.form-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #f1f3f5;
}

.form-section legend {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 0.5rem; /* Pequeño espacio para que no se pegue al borde */
    color: #343a40;
}

/* Cada par de "etiqueta + campo" */
.form-group {
    margin-bottom: 1.25rem;
}

/* Estilo de la etiqueta (Label) */
.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

/* Estilo base para TODOS los campos (input, select, textarea) */
.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: 'ubuntu', sans-serif; /* Hereda la fuente */
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box; /* Clave para que el padding no rompa el ancho */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Efecto visual al hacer clic en un campo */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: #007bff; /* Un azul para destacar */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none; /* Quitamos el borde feo por defecto */
}

/* Estilo para el input readonly, para que se vea 'desactivado' */
.form-input[readonly] {
    background-color: #e9ecef; /* Fondo gris */
    color: #495057;
    font-weight: 600;
    cursor: not-allowed;
}

/* Estilo específico para Áreas de Texto */
.form-textarea {
    min-height: 120px;
    resize: vertical; /* Permite al usuario redimensionar verticalmente */
}

/* Grupo de Radio Buttons */
.radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex; /* Pone los radios en línea */
    gap: 1.5rem; /* Espacio entre opciones */
}

.radio-group label {
    font-weight: normal; /* El label normal es 500, pero aquí lo queremos más suave */
}

/* Estilo para grupo de Checkbox (label al lado) */
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre el check y el label */
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

/* Estilo para el label del checkbox */
.form-label-checkbox {
    font-weight: 500;
    color: #495057;
    /* Anulamos el margin-bottom del .form-label normal */
    margin-bottom: 0; 
}

/* Pone en negrita el label cuando el check está marcado */
.form-checkbox:checked + .form-label-checkbox {
    font-weight: 700; /* 700 es un 'bold' estándar */
    color: #212529; /* Color de texto más oscuro */
}


/* Estilo para los checkboxes genéricos */
.form-checkbox {
    transform: scale(1.4);
    margin: 0;
    accent-color: #0056b3; /* Color del check (navegadores modernos) */
}

/* Contenedor para los botones (Enviar, Volver, etc) */
.form-actions {
    text-align: center;
    margin-top: 2rem;
    display: flex;
    flex-direction: column; /* Botones apilados en móvil */
    gap: 1rem; /* Espacio entre botones */
    flex-wrap: wrap; /* Permite que los botones bajen de línea */
    justify-content: center; /* Centra los botones */
}

/* Botón de envío principal */
.form-button-primary {
    background-color: #0056b3; /* Un azul más corporativo */
    color: white;
    border: none;
    padding: 0.9rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'ubuntu', sans-serif;
    transition: background-color 0.2s, transform 0.2s;
    width: 100%; /* Ocupa todo el ancho del contenedor */
}

.form-button-primary:hover,
.form-button-primary:focus {
    background-color: #004494; /* Azul más oscuro */
    transform: translateY(-2px);
}

/* Estilo para el botón secundario (Imprimir, Reporte, etc.) */
.form-button-secondary {
    display: inline-block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057; /* Texto gris */
    background-color: #f1f3f5; /* Fondo gris claro */
    padding: 0.9rem 1.5rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #ced4da;
    cursor: pointer;
    box-sizing: border-box;
}

.form-button-secondary:hover,
.form-button-secondary:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: #e9ecef;
}

/* Estilo para el botón de peligro (Borrar) */
.form-button-danger {
    display: inline-block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff; /* Texto blanco */
    background-color: #d90429; /* Fondo rojo */
    padding: 0.9rem 1.5rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #d90429;
    cursor: pointer;
    box-sizing: border-box;
}

.form-button-danger:hover,
.form-button-danger:focus {
    transform: translateY(-2px);
    background-color: #b2001f; /* Rojo más oscuro */
    border-color: #b2001f;
}

/* Estilo para el botón "Volver" DENTRO de los formularios.
  Reutiliza el estilo de .form-button-secondary
*/
.form-actions .link-volver {
    display: block;
    text-decoration: none;
    font-size: 1.1rem; 
    font-weight: 600;
    color: #495057; 
    background-color: #f1f3f5; 
    padding: 0.9rem 1.5rem; 
    text-align: center;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #ced4da; 
    box-sizing: border-box;
}

.form-actions .link-volver:hover,
.form-actions .link-volver:focus {
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: #e9ecef; 
}


/* --- --- --- --- --- --- --- --- --- --- */
/* --- SECCIÓN DE ESTILOS DE LISTAS/TABLAS --- */
/* --- --- --- --- --- --- --- --- --- --- */

/* Contenedor para los controles de la lista (buscador, botones, etc) */
.list-controls {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en móviles */
    justify-content: space-between; /* Buscador a la izq, botones a la der */
    align-items: flex-end; /* Alinea el botón y el input */
    gap: 1.5rem;
    padding: 1rem;
    background-color: #fdfdfd;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
}

/* Hacemos que el grupo del formulario del buscador crezca */
.list-controls .form-group {
    flex-grow: 1; /* El buscador ocupa el espacio disponible */
    margin-bottom: 0;
}

/* Ajustamos el botón de volver para que encaje */
.list-controls .link-volver {
    margin: 0; 
    flex-shrink: 0; /* Evita que el botón se encoja */
    
    /* Le damos el estilo de botón gris */
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    background-color: #f1f3f5;
    padding: 0.9rem 1.5rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #ced4da;
    box-sizing: border-box;
}

.list-controls .link-volver:hover,
.list-controls .link-volver:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: #e9ecef;
}

/* Grupo de botones dentro de list-controls */
.list-controls-actions {
    display: flex;
    flex-wrap: wrap; /* Que los botones se apilen si no caben */
    gap: 0.5rem; /* Espacio pequeño entre botones */
    justify-content: flex-end; /* Alinear botones a la derecha */
    flex-shrink: 0; /* Evita que el grupo se encoja */
}

/* Hacemos que los botones dentro de este grupo se ajusten */
.list-controls-actions .form-button-primary,
.list-controls-actions .form-button-secondary,
.list-controls-actions .link-volver {
    width: auto; /* Que no ocupen el 100% */
    padding: 0.75rem 1rem; /* Un poco menos de padding para que quepan más */
    font-size: 0.9rem; /* Letra un poco más pequeña */
    margin: 0; /* Anulamos márgenes por defecto */
}


/* Contenedor responsive para la tabla */
.table-container {
    width: 100%;
    overflow-x: auto; /* IMPORTANTE: Añade scroll horizontal en móviles */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #dee2e6;
}

/* La tabla de datos principal */
.data-table {
    width: 100%;
    border-collapse: collapse; /* Bordes limpios */
}

/* Celdas de cabecera (TH) y celdas de datos (TD) */
.data-table th,
.data-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #dee2e6; /* Líneas solo horizontales */
    text-align: left;
    vertical-align: middle;
}

/* Cabecera de la tabla */
.data-table thead th {
    background-color: #f8f9fa; /* Fondo gris muy claro */
    font-weight: 600;
    color: #343a40;
}

/* Cuerpo de la tabla */
.data-table tbody td {
    color: #495057;
}

/* Efecto hover en las filas */
.data-table tbody tr:hover {
    background-color: #f1f3f5;
}

/* Forzamos que el texto de la primera columna de las tablas no se parta */
.data-table th:first-child,
.data-table td:first-child {
    white-space: nowrap; 
}

/* Estilos para los enlaces de acción (Editar, Borrar, etc.) */
.action-link-edit,
.action-link-copy,
.action-link-delete {
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.action-link-edit { color: #0056b3; } /* Azul */
.action-link-edit:hover { background-color: rgba(0, 86, 179, 0.1); }

.action-link-copy { color: #1e8133; } /* Verde */
.action-link-copy:hover { background-color: rgba(30, 129, 51, 0.1); }

.action-link-delete { color: #d90429; } /* Rojo */
.action-link-delete:hover { background-color: rgba(217, 4, 41, 0.1); }

.btn-call {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    color: #ffffff;
    background-color: #1a7f37; /* Verde */
    transition: background-color 0.2s, transform 0.15s;
    white-space: nowrap;
    display: inline-block;
}

.btn-call:hover {
    background-color: #14612a;
    transform: translateY(-1px);
}


/* --- --- --- --- --- --- --- --- --- --- */
/* --- SECCIÓN DE ESTILOS DE CALCULADORA --- */
/* --- --- --- --- --- --- --- --- --- --- */

/* Contenedor Flex para las calculadoras inferiores */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en móviles */
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Cada tarjeta de calculadora en el flex-container */
.flex-container .form-container {
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 300px; /* Ancho mínimo antes de apilarse */
    margin-top: 0; /* Anulamos el margen superior */
}

/* --- ¡NUEVA REGLA AÑADIDA AQUÍ! --- */
/* Para campos de formulario en línea (ej. Nombre y Teléfono) */
.flex-container .form-group {
    flex: 1; /* Hace que los grupos de formulario compartan espacio */
    min-width: 250px; /* Ancho mínimo antes de apilarse */
    margin-bottom: 0; /* Anulamos el margen inferior */
}


/* Títulos de las tarjetas-calculadora */
.flex-container .form-container h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #1a252f;
}

/* Separador horizontal */
.form-divider {
    border: none;
    height: 1px;
    background-color: #dee2e6;
    margin: 2rem 0;
}

/* ANULACIÓN: Inputs dentro de una tabla */
.data-table .form-input,
.data-table .form-select {
    width: auto; /* Ancho automático según el contenido */
    min-width: 100px; /* Un mínimo para que no sea diminuto */
    text-align: right; /* Mantenemos el texto alineado a la derecha */
}

/* ANULACIÓN: Checkbox dentro de una tabla */
.data-table input[type="checkbox"] {
    transform: scale(1.4);
    margin: 0;
    accent-color: #0056b3;
}

/* Centramos el contenido de la tabla de la calculadora */
.data-table td,
.data-table th {
    text-align: center;
    vertical-align: middle;
}


/* --- --- --- --- --- --- --- --- --- --- */
/* --- SECCIÓN DE ORDEN DE TRABAJO --- */
/* --- --- --- --- --- --- --- --- --- --- */

/* Muestra el ID de la orden en el formulario de edición */
.order-id-display {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Grupo de línea de trabajo (Textarea + Checkbox) */
.work-line-group {
    display: flex;
    flex-wrap: wrap; /* Para móviles */
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.work-line-text {
    flex: 1; /* Ocupa todo el espacio posible */
    min-width: 300px; /* Ancho mínimo */
    margin-bottom: 0; /* Anulamos el margen inferior */
}

/* Reducimos el tamaño del textarea de trabajo */
.work-line-text .form-textarea {
    min-height: 60px;
    font-size: 0.95rem;
}

.work-line-check {
    /* Alineamos el checkbox con el textarea */
    margin-top: 2.2rem; 
    flex-shrink: 0; /* Evita que se encoja */
}

/*
  Hacemos que el checkbox dentro de la línea de trabajo
  no tenga fondo ni borde, para que se integre mejor.
*/
.work-line-checkbox-inner {
    background-color: transparent;
    border: none;
    padding: 0;
}


/* En pantallas más grandes, ponemos los botones uno al lado del otro */
@media (min-width: 600px) {
    .form-actions {
        flex-direction: row; /* Botones en línea */
        justify-content: center;
    }

    /* Hacemos que los botones no ocupen el 100% */
    .form-button-primary,
    .form-button-secondary,
    .form-button-danger,
    .form-actions .link-volver {
        width: auto;
        min-width: 150px; /* Ancho mínimo para botones */
    }
}


/* --- --- --- --- --- --- --- --- --- --- */
/* --- CLASES DE UTILIDAD (Impresión) --- */
/* --- --- --- --- --- --- --- --- --- --- */

@media print {
    /* Oculta todo lo que tenga esta clase al imprimir */
    .oculto-impresion, .oculto-impresion * {
        display: none !important;
    }
}