/* ==========================================================================
   license-card.css - Estilos para la Tarjeta de Licencia Digital
   Adaptado de styles.css proporcionado por el usuario.
   ========================================================================== */

/* Variables (referencia, ya definidas en base.css, pero útil tenerlas aquí)
:root {
    --primary-color: #1E8449;
    --primary-dark: #145A32;
    --secondary-color: #FFFFFF;
    --text-light: #FFFFFF;
    --text-color: #34495E;
    --accent-color: #f1c40f;
    --border-color: #e0e7e1;
    --shadow-color: rgba(0, 0, 0, 0.07);
}
*/
/* Usaremos beige directamente o define --beige-bg en base.css si lo prefieres */
:root {
    --card-beige-bg: #f3ecd4;
    --card-green-footer: #388e5a; /* Un verde ligeramente diferente para el footer? O usa --primary-color */
}


.license-card-page-container .button-primary, /* Asegurar que botones usen estilo general */
.license-card-page-container .button-secondary {
   margin: 0 5px;
}

/* Contenedor principal de la tarjeta */
.license-card-wrapper {
   max-width: 570px; /* Ancho original */
   margin: 2rem auto;
   padding: 1rem; /* Espacio alrededor por si acaso */
   background-color: var(--background-color); /* Fondo página */
}

.judo-card {
   border-radius: 14px;
   box-shadow: 0 4px 15px rgba(0, 62, 41, 0.2); /* Sombra verde oscuro */
   width: 100%; /* Adaptarse al wrapper */
   /* min-height: 320px; No fijar alto, que sea dinámico */
   padding: 0;
   position: relative;
   overflow: hidden;
   border: 2px solid var(--primary-dark); /* Borde verde oscuro */
   background: var(--card-beige-bg);
   display: flex;
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif; /* Fuente específica para la tarjeta */
}

/* Cabecera */
.card-header {
   background: var(--primary-color); /* Verde principal */
   color: var(--text-light);
   padding: 10px 20px 8px 15px; /* Padding ajustado */
   border-bottom: 2px solid var(--primary-dark);
   display: flex;
   align-items: center;
   position: relative;
   z-index: 10;
}

.header-logo img {
   height: 44px; width: 44px;
   border-radius: 6px; /* Ligeramente menos redondo */
   border: 1px solid var(--primary-dark);
   background: #fff;
   margin-right: 10px; /* Espacio logo-texto */
}

.header-info { flex: 1; padding-left: 10px; }

.fed-title {
   font-weight: bold; color: var(--text-light);
   font-size: 1em; /* Tamaño ajustado */
   margin-bottom: 2px; letter-spacing: 0.5px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.lic-label {
   color: var(--text-light); font-size: 0.9em; /* Tamaño ajustado */
   font-weight: 600; line-height: 1.2; letter-spacing: .2px;
}
.lic-label span { text-transform: uppercase; } /* Deporte en mayúsculas */

.header-chip img { height: 28px; width: 38px; margin-left: 10px; }

/* Cuerpo Principal */
.card-main {
   background: var(--card-beige-bg);
   padding: 15px 20px 10px 20px; /* Padding ajustado */
   position: relative;
   z-index: 10;
   flex: 1;
}

.main-row { margin-bottom: 8px; } /* Espacio entre filas de datos */

.main-row-space {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   gap: 15px; /* Espacio entre DNI e ID */
}

.dni-group, .num-group { display: flex; flex-direction: column; }

.dni-label, .num-label {
   font-size: .8em; color: var(--primary-dark); font-weight: 600; margin-bottom: 0px;
}

.dni-value, .num-value {
   font-size: 1.1em; font-weight: bold; color: #222; letter-spacing: 0.5px;
   background: rgba(255, 255, 255, 0.5); /* Fondo semi-transparente */
   border-radius: 4px; padding: 1px 6px; border: 1px solid #ddd;
}
.num-value { font-size: 1.2em; color: var(--primary-dark); } /* ID más destacado */


.name-row { margin-top: 8px; } /* Separar nombres de IDs */

.main-name {
   display: block; font-size: 1.3em; font-weight: bold; color: #222;
   text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
}

.main-surname {
   display: block; font-size: 1.1em; font-weight: 500; color: #222;
   text-transform: uppercase; letter-spacing: .2px;
}

/* Detalles inferiores (Licencia, Nacimiento, Club) */
.main-details {
   margin-top: 10px;
   display: flex;
   justify-content: space-between; /* Separar Licencia y Nacimiento */
   align-items: flex-end;
   gap: 20px; /* Espacio entre bloques */
   font-size: 0.9em;
   padding-top: 8px;
   border-top: 1px dashed #bba; /* Separador */
}
.main-details > div { /* Cada bloque (Licencia, Nacimiento) */ }

.detail-label { color: #777; display: block; font-size: 0.8em; margin-bottom: -2px; }
.detail-value { color: #222; font-weight: 600; display: block; } /* Valor más destacado */

/* Fila del club (ahora separada) */
.club-row { margin-top: 5px; }
.club-row .detail-value {
   color: var(--primary-dark); font-weight: bold; font-size: 0.95em; text-transform: uppercase;
}


/* Pie de Tarjeta */
.card-footer {
   width: 100%;
   background: var(--primary-color); /* Verde principal */
   color: var(--white);
   display: flex;
   align-items: flex-end; /* Alinear elementos abajo */
   justify-content: space-between; /* Distribuir espacio */
   position: relative;
   padding: 8px 15px 8px 20px; /* Padding ajustado */
   min-height: 55px; /* Altura mínima */
   z-index: 10;
}

.footer-barcode {
   flex-grow: 1; /* Ocupa espacio disponible */
   margin-right: 15px; /* Espacio antes del QR */
   /* Centrar el SVG si es necesario, depende de cómo JsBarcode lo genere */
   display: flex;
   align-items: flex-end;
}
.footer-barcode svg {
   display: block; /* Evita espacio extra */
   max-width: 100%; /* Ajustarse al contenedor */
   height: 38px; /* Altura fija */
}

.footer-qr {
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   padding: 4px;
   line-height: 0; /* Evitar espacio extra */
   flex-shrink: 0; /* No encoger */
}
/* QR Code JS ajustará tamaño, pero podemos dar tamaño al contenedor */
#qr-container {
  width: 60px; /* Tamaño contenedor QR */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#qr-container img { /* Estilo para la imagen generada por qrcode.js */
  max-width: 100%;
  max-height: 100%;
}


.footer-escudo { /* Contenedor para logo pequeño si se usa */
  position: absolute;
  right: 15px;
  bottom: 5px;
  opacity: 0.7;
}
.footer-escudo img { height: 25px; width: auto; }


/* Botones fuera de la tarjeta (si se usan en la página) */
.license-actions {
   text-align: center;
   margin-top: 2rem;
   padding-bottom: 1rem;
}


/* --- Responsive Tarjeta --- */
@media (max-width: 600px) {
   .license-card-wrapper { max-width: 95%; margin: 1.5rem auto; }
   .card-header { padding: 8px 12px 6px 10px; flex-wrap: wrap; } /* Permitir wrap */
   .header-info { padding-left: 8px; flex-basis: 100%; order: 3; text-align: center; padding-top: 5px;} /* Títulos debajo */
   .header-logo { order: 1; } .header-chip { order: 2; margin-left: auto;}
   .fed-title { font-size: 0.95em; } .lic-label { font-size: 0.8em; }
   .card-main { padding: 12px 15px 8px 15px; }
   .main-row-space { flex-direction: column; align-items: flex-start; gap: 8px;}
   .name-row { flex-direction: column; gap: 0px; margin-top: 10px;}
   .main-name { font-size: 1.15em; } .main-surname { font-size: 1em; }
   .main-details { flex-direction: column; gap: 8px; margin-top: 12px; align-items: flex-start;}
   .card-footer { padding: 6px 10px 6px 15px; min-height: 50px;}
   .footer-barcode svg { height: 30px; }
   #qr-container { width: 50px; height: 50px; }
   .footer-escudo { bottom: 3px; right: 10px; } .footer-escudo img { height: 20px; }
}