/* =============================================
   Libro de Reclamaciones - Estilo personalizado
   Basado en PANADERIA Y PASTELERIA A & C S.A.C.
   ============================================= */

/* 1. DEFINICIÓN DE LA PALETA DE COLORES OFICIAL (de la imagen de la Página en Construcción) */
:root {
    --marca-marron-oscuro: #4C2A1B;
    /* Letras A&S - Para títulos y textos fuertes */
    --marca-rojo-teja: #9B3D24;
    /* Texto Panadería/Pastelería - Para bordes y h2 */
    --marca-naranja-dorado: #C2821D;
    /* Espiga de trigo - Para detalles sutiles */
    --marca-naranja-marron: #D07B28;
    /* Texto de contacto - Ideal para botones y subtítulos */
    --marca-negro-calido: #231A12;
    /* Los números de teléfono - Texto principal */
    --marca-fondo-blanco: #FDFAF6;
    /* Fondo blanco crema de la página */
    --marca-marca-agua: #F5EFE4;
    /* Color sutil para el patrón de fondo */
    --marca-gris-borde: #E0DDD9;
    /* Gris cálido para bordes (alternativa a #CCCCCC) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. ESTILO DEL FONDO DEL BODY */
body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--marca-fondo-blanco);
    /* El patrón SVG en marca de agua usando el color crema sutil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Ctext x='50%25' y='50%25' font-family='Georgia, serif' font-size='60' fill='%23F5EFE4' text-anchor='middle' dominant-baseline='middle' font-style='italic' font-weight='bold'%3EA%26S%3C/text%3E%3Cpath d='M80 110 L120 110 M130 110 L170 110' stroke='%23F5EFE4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 250px 250px;
    color: var(--marca-negro-calido);
    line-height: 1.5;
}

.claim-header {
    background: var(--marca-marca-agua);
    color: var(--marca-naranja-marron);
}

.claim-header .btn {
  background-color: #4C2A1B;
}

/* 3. CONTENEDOR PRINCIPAL (Corregido el error del 20%) */
.contenedor {
    width: 800px;
    max-width: 90%;
    /* Se ha aumentado para que no sea demasiado angosto */
    margin: 30px auto;
    background: var(--marca-fondo-blanco);
    padding: 30px 35px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    /* Sombra ligeramente más suave y elegante */
}

/* Logo */
.logotipo {
    display: block;
    margin: 0 auto 40px auto;
    max-width: 220px;
    height: auto;
}

/* Título principal (h1) */
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: var(--marca-rojo-teja);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--marca-gris-borde);
    text-align: start;
}

/* Subtítulo */
.subtitulo {
    font-size: 15px;
    color: var(--marca-naranja-marron);
    text-align: center;
    margin-bottom: 30px;
}

/* Datos de la empresa (fijos) */
.datos-empresa {
    background: #FDF9F5;
    /* Un tono ligeramente más oscuro que el fondo blanco */
    border-left: 4px solid var(--marca-naranja-marron);
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--marca-negro-calido);
}

.datos-empresa b {
    color: var(--marca-rojo-teja);
}

/* Secciones */
.seccion {
    margin-top: 25px;
    margin-bottom: 20px;
}

/* Título de sección (h2) */
.seccion h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: var(--marca-rojo-teja);
    border-bottom: 1px dotted var(--marca-gris-borde);
    padding-bottom: 8px;
    margin-bottom: 20px;
    text-align: left;
}

/* Grupos de radio / check */
.radio-grupo {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.radio-grupo label {
    cursor: pointer;
    font-size: 14px;
    color: var(--marca-negro-calido);
}

.check-grupo {
    margin-bottom: 18px;
}

/* Campos */
.fila {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 18px;
}

.campo {
    flex: 1;
    min-width: 200px;
}

.campo label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: var(--marca-negro-calido);
    margin-bottom: 4px;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--marca-gris-borde);
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #fff;
    color: var(--marca-negro-calido);
    transition: border 0.3s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--marca-naranja-marron);
    outline: none;
}

.campo textarea {
    resize: vertical;
    min-height: 80px;
}

/* Campo con ícono de info */
.campo-con-info {
    display: flex;
    align-items: flex-end;
}

.campo-con-info .input-icono {
    flex: 1;
}

.info-icono {
    background: #FDF9F5;
    border: 1px solid var(--marca-gris-borde);
    border-left: none;
    padding: 10px 12px;
    border-radius: 0 4px 4px 0;
    font-size: 18px;
    color: var(--marca-naranja-marron);
    cursor: help;
}

/* Sección tutor (oculta) */
#tutor-seccion {
    display: none;
    background: #fefefe;
    border: 1px dashed var(--marca-gris-borde);
    padding: 15px;
    margin: 10px 0 20px 0;
    color: var(--marca-negro-calido);
}

#tutor-seccion .aviso {
    font-size: 13px;
    color: var(--marca-rojo-teja);
    margin-bottom: 10px;
}

/* Archivo adjunto */
.archivo {
    margin: 10px 0 20px;
}

.archivo input {
    width: 100%;
    border: 1px solid var(--marca-gris-borde);
    padding: 8px;
    border-radius: 4px;
}

/* Observaciones y lista legal */
.observaciones {
    background: #FDF9F5;
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 13px;
    margin: 20px 0;
    color: var(--marca-negro-calido);
}

.observaciones ol {
    margin: 8px 0 0 20px;
}

.observaciones ol li {
    margin-bottom: 5px;
}

/* Autorización */
.autorizacion {
    margin: 20px 0;
    font-size: 13px;
    color: var(--marca-negro-calido);
}

.autorizacion label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Botón enviar - usando el naranja marrón del logo */
.boton-enviar {
    text-align: center;
    margin: 25px 0 10px;
}

.boton-enviar button {
    background: var(--marca-naranja-marron);
    /* #D07B28 */
    color: white;
    border: none;
    padding: 12px 45px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.boton-enviar button:hover {
    background: var(--marca-rojo-teja);
    /* #9B3D24 */
}

.boton-enviar button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Loader */
.loader {
    display: none;
    text-align: center;
    margin-top: 20px;
    color: var(--marca-naranja-marron);
    font-weight: bold;
}

.loader img {
    width: 40px;
    height: 40px;
    display: block;
    margin: 10px auto;
}

/* Footer */
.footer-texto {
    text-align: center;
    font-size: 13px;
    color: var(--marca-negro-calido);
    border-top: 1px dotted var(--marca-gris-borde);
    padding-top: 15px;
    margin-top: 20px;
}

/* Enlaces */
a {
    color: var(--marca-naranja-marron);
    text-decoration: none;
}

a:hover {
    font-weight: bold;
    color: var(--marca-rojo-teja);
}

a:active {
    font-weight: bold;
    color: var(--marca-naranja-dorado);
}

/* Responsive */
@media (max-width: 600px) {
    .contenedor {
        padding: 20px;
    }

    .fila {
        flex-direction: column;
    }
}