/* =========== Pueblo Duerme – app.css ===========
   • Mobile-first, responsive
   • Light/Dark (prefers-color-scheme)
   • Utilidades y componentes reutilizables
   =============================================== */

:root{
    --bg: #ffffff;
    --text: #101418;
    --muted: #6b7280;
    --card: #ffffff;
    --border: #e5e7eb;
    --primary: #3b82f6;
    --primary-600: #2563eb;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 8px 20px rgba(17,24,39,.06);
    --radius: 14px;
    --pad: 14px;
}

@media (prefers-color-scheme: dark){
    :root{
        --bg: #0b0e13;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --card: #121721;
        --border: #1f2937;
        --primary: #60a5fa;
        --primary-600: #3b82f6;
        --success: #34d399;
        --danger: #f87171;
        --warning: #fbbf24;
        --shadow: 0 8px 20px rgba(0,0,0,.35);
    }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;width:100%;overflow-x:hidden}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    max-width: 100vw;
    overflow-x: hidden;
}

.container{
    width:100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    overflow-x: hidden;
}

header.appbar{
    position: sticky; top:0; z-index:10;
    backdrop-filter: blur(10px);
    background: color-mix(in hsl, var(--bg) 85%, transparent);
    border-bottom:1px solid var(--border);
}
.appbar .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--primary);display:inline-block}

main{
    padding-block:8px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Grid */
.grid{display:grid;gap:8px}
@media (min-width: 960px){
    .grid.cols-4{grid-template-columns: 1.2fr 1fr 1fr 1fr;}
    .grid.cols-3{grid-template-columns: repeat(3,1fr);}
    .grid.cols-2{grid-template-columns: repeat(2,1fr);}
}

/* Cards */
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}
.card h3, .card h4{margin:4px 0 6px;font-size:0.95em}

/* Inputs & Buttons */
input, select, button, textarea{
    font: inherit;
    border-radius: 12px;
    border:1px solid var(--border);
    padding:10px 12px;
    background:var(--bg);
    color:var(--text);
    outline: none;
}
input:focus, select:focus, textarea:focus{border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent)}

/* Excepciones para night-action controls - estos tienen sus propios estilos */
.night-action-select,
.night-action-btn {
    /* Los estilos específicos están más abajo */
}

button{
    background: var(--card);
    cursor:pointer;
    transition: transform .02s ease, background .2s ease, border-color .2s ease;
}
button:active{ transform: translateY(1px); }

/* Button variants */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px}
.btn.primary{background: var(--primary); color:white; border-color: transparent;}
.btn.primary:hover{background: var(--primary-600)}
.btn.outline{background: transparent}
.btn.success{background: var(--success); color:white; border-color:transparent}
.btn.danger{background: var(--danger); color:white; border-color:transparent}

.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:6px}
.center{display:flex;align-items:center;justify-content:center}

.badge{
    display:inline-block;
    padding:4px 10px;
    background: color-mix(in srgb, var(--primary) 15%, var(--card));
    border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    color: var(--text);
    border-radius: 999px;
    font-size: 12px;
}

.muted{color:var(--muted)}
.hr{height:1px;background:var(--border);margin:6px 0}
ul.clean{list-style:none;padding-left:0;margin:0}
li.item{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:8px;
    background:color-mix(in srgb, var(--card) 85%, transparent);
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    max-width:100% !important;
}

/* Player info container */
.player-info{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.player-info > span{
    flex-shrink:0 !important;
}

.player-info > span:not(:first-child):not(:last-child){
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* Role select in player list */
.role-select{
    min-width:90px !important;
    max-width:120px !important;
    font-size:11px !important;
    flex-shrink:0 !important;
}

/* Actions container */
.player-actions{
    gap:4px !important;
    flex-wrap:nowrap !important;
    flex-shrink:0 !important;
}

/* Action buttons in player list */
.player-action-btn{
    min-width:32px !important;
    padding:4px 8px !important;
    flex-shrink:0 !important;
}

/* Remove button specific styling */
.remove-btn{
    background:#333 !important;
    color:#fff !important;
    border:1px solid #555 !important;
}

.remove-btn:hover{
    background:#444 !important;
}

@media (prefers-color-scheme: dark){
    .remove-btn{
        background:#444 !important;
        border-color:#666 !important;
    }
    .remove-btn:hover{
        background:#555 !important;
    }
}

/* Toast */
.toast{
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    min-width: 300px;
    width: auto;
    padding: 24px 32px; 
    border-radius: 18px;
    border: 2px solid var(--border); 
    background: var(--card); 
    box-shadow: var(--shadow);
    display: none;
    z-index: 9999;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    animation: toastFadeIn 0.3s ease-out;
}
.toast.show{display: block}
.toast.ok{
    border-color: color-mix(in srgb, var(--success) 60%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--card));
}
.toast.err{
    border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--card));
}
@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Helpers */
.hide{display:none !important}
.w-100{width:100%}
.max-300{max-width:300px}
.max-200{max-width:200px}

/* Mobile improvements */
@media (max-width: 768px){
    .container{padding:8px}
    main{padding-block:6px}
    .grid.cols-4, .grid.cols-3, .grid.cols-2{grid-template-columns:1fr}
    .grid{gap:6px}
    .card{padding:8px;margin-bottom:6px}
    .card h3{font-size:0.9em;margin:2px 0 4px}
    .row{flex-wrap:wrap;gap:6px}
    .btn{padding:6px 10px;font-size:12px}
    .btn-sm{padding:4px 8px;font-size:11px;min-width:auto}
    /* Prevenir zoom en iOS: font-size mínimo 16px para inputs (excepto night-action-select que tiene su propio estilo) */
    input:not(.night-action-select), select:not(.night-action-select){padding:8px 10px;font-size:16px}
    .badge{font-size:11px;padding:3px 8px}
    .appbar .row{padding:10px 12px}
    .brand{font-size:16px}
    
    /* Tabla responsive - mejor para móvil */
    #roleTable{width:100%;font-size:13px;border-collapse:collapse}
    #roleTable thead{display:none}
    #roleTable tbody tr{display:block;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:10px;background:var(--card)}
    #roleTable tbody td{display:flex;justify-content:space-between;padding:6px 0;border:none}
    #roleTable tbody td:before{content:attr(data-label);font-weight:600;color:var(--muted);margin-right:10px}
    #roleTable tbody td:last-child{justify-content:flex-end}
    
    /* Player view mobile */
    #playerName{font-size:24px !important}
    #role{font-size:20px !important;padding:6px 12px !important}
    #deadBanner{padding:10px !important}
    /* Emoji del rol - GIGANTE en móvil pero que quepa en pantalla y centrado */
    #deadRole{
        font-size:min(85vw, 350px) !important; 
        margin-bottom:12px !important; 
        max-width:100% !important; 
        overflow:hidden !important;
        text-align:center !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
    }
    /* Texto MUERTO - se ajusta automáticamente */
    #deadBanner > div > div:nth-child(2){font-size:clamp(28px, 8vw, 48px) !important; text-align:center !important}
    /* Texto de instrucciones - se ajusta automáticamente */
    #deadBanner > div > div:last-child{font-size:clamp(13px, 3.5vw, 18px) !important; text-align:center !important}
    #seerPanel{left:12px;right:12px;transform:none;padding:12px 16px}
    #seerPanel > div:first-child{font-size:16px !important}
    #seerText{font-size:18px !important}
    
    /* Toast en móvil */
    .toast{
        max-width: 90%;
        min-width: 280px;
        padding: 20px 24px;
        font-size: 18px;
    }
}

/* Small button variant */
.btn-sm{
    padding:6px 10px;
    font-size:12px;
    min-width:auto;
}

/* Role Distribution Section */
.card-summary {
    cursor: pointer;
    font-weight: bold;
    padding: 2px 0;
}

.card-summary h3 {
    display: inline;
    margin: 0;
    font-size: 0.9em;
}

.role-distribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.role-validation {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 0.68em;
    margin-bottom: 2px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.role-validation-icon {
    font-size: 0.9em;
    flex-shrink: 0;
}

.role-validation-text {
    flex: 1;
    color: var(--text);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-validation.warning {
    background: color-mix(in srgb, var(--warning) 10%, var(--card));
    border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
}

.role-validation.error {
    background: color-mix(in srgb, var(--danger) 10%, var(--card));
    border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
}

.role-validation.success {
    background: color-mix(in srgb, var(--success) 10%, var(--card));
    border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.role-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 1px 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
}

.role-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.badge-sm {
    font-size: 0.7em;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 0;
}

.role-input-group {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.role-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.role-btn:hover {
    background: color-mix(in srgb, var(--primary) 15%, var(--card));
    border-color: var(--primary);
}

.role-btn:active {
    transform: scale(0.95);
}

.role-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.role-input {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    text-align: center;
    font-size: 12px;
    padding: 2px 1px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    margin: 0;
}

.role-actions {
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-hint {
    text-align: center;
    font-size: 0.7em;
    color: var(--muted);
    line-height: 1.3;
}

/* Night Actions Section */
.night-actions-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.roles-summary {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 3px;
}

.roles-summary-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--text);
    font-size: 0.75em;
}

.roles-summary-icon {
    font-size: 0.9em;
}

.roles-summary-title {
    font-size: 0.85em;
}

.roles-summary-content {
    font-size: 0.75em;
    line-height: 1.5;
    color: var(--text);
}

.night-action-card {
    background: color-mix(in srgb, var(--card) 95%, transparent);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.night-action-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-weight: 500;
    color: var(--text);
    font-size: 0.75em;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
}

.night-action-icon {
    font-size: 0.9em;
    flex-shrink: 0;
}

.night-action-title {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.night-action-player {
    color: var(--muted);
    font-size: 0.8em;
    font-weight: normal;
}

.night-action-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.night-message {
    color: var(--muted);
    font-size: 0.75em;
    text-align: center;
    padding: 3px 0;
}

/* Cupid special layout */
#cardCupid .night-action-controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}

@media (max-width: 768px) {
    .role-item {
        flex-wrap: nowrap;
        gap: 4px;
        max-width: 100%;
        padding: 1px 0;
    }
    
    .role-label {
        flex: 0 0 auto;
        max-width: none;
    }
    
    .role-input-group {
        flex: 0 0 auto;
        max-width: none;
        justify-content: flex-start;
    }
    
    .role-input {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
    }
    
    .role-btn {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    
    .night-action-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        max-width: 100%;
    }
    
    .night-action-controls {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }
    
    .night-action-wrapper {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .night-action-btn {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }
    
    #cardCupid .night-action-controls {
        grid-template-columns: 1fr;
    }
    
    .role-validation-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* Blur effect for roles */
.role-blurred{
    filter: blur(8px);
    transition: filter 0.3s ease;
    user-select: none;
    cursor: pointer;
}
.role-visible{
    filter: blur(0);
    transition: filter 0.3s ease;
}

/* Night action wrapper for dropdown arrow */
.night-action-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.night-action-wrapper::after {
    content: '▼';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    font-size: 12px;
}

/* Night action controls - consistent sizing */
.night-action-select {
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 6px 26px 6px 10px !important;
    height: 32px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    border-radius: 6px !important;
    width: 100% !important;
}

.night-action-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent) !important;
    outline: none !important;
}

.night-action-btn {
    min-width: 90px !important;
    height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.night-action-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.night-action-btn:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .night-action-select {
        height: 36px !important;
        padding: 8px 28px 8px 10px !important;
        font-size: 16px !important;
    }
    
    .night-action-btn {
        min-width: 90px !important;
        height: 36px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}